DOMMatrix: translateSelf() メソッド
Baseline
Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since 2020年1月.
メモ: この機能はウェブワーカー内で利用可能です。
translateSelf() は DOMMatrix インターフェイスのメソッドで、行列を変更する座標変換メソッドです。指定されたベクトルを適用し、更新された行列を返します。デフォルトのベクトルは [0, 0, 0] です。
行列を変更せずに変更移動する場合は、DOMMatrixReadOnly.translate() を参照してください。
構文
js
translateSelf(translateX, translateY)
translateSelf(translateX, translateY, translateZ)
引数
translateX-
平行移動させるベクトルの横軸(x 座標)を表す数値です。
translateY-
平行移動させるベクトルの縦軸(y 座標)を表す数値です。
translateZ省略可-
平行移動させるベクトルの z 成分を表す数値です。指定されなかった場合の既定値は 0 になります。 0 以外の数値であった場合、結果の行列は 3D になります。
返値
自分自身を返します。指定されたベクトルで平行移動させた DOMMatrix を返します。
例
js
const matrix = new DOMMatrix(); // 行列を作成
console.log(matrix.toString()); // 出力: "matrix(1, 0, 0, 1, 0, 0)"
matrix.translateSelf(25, 25); // 変更する
console.log(matrix); // 出力: "matrix(1, 0, 0, 1, 25, 25)"
仕様書
| Specification |
|---|
| Geometry Interfaces Module Level 1> # dom-dommatrix-translateself> |
ブラウザーの互換性
関連情報
DOMMatrixReadOnly.translate()- CSS の
transformプロパティ - CSS の
translateプロパティ - CSS の
<transform-function>関数 - CSS 座標変換モジュール
- SVG の
transform属性 CanvasRenderingContext2Dインターフェイスのメソッド