DOMMatrixReadOnly: rotate() メソッド

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月.

メモ: この機能はウェブワーカー内で利用可能です。

rotate() は DOMMatrixReadOnly インターフェイスのメソッドで、ソース行列をそれぞれの軸について指定された角度だけ回転させて生成された、新しい DOMMatrix を返します。元の行列は変更されません。

行列を回転させた形に変更するには、DOMMatrix.rotateSelf() を参照してください。

構文

rotate()
rotate(rotX)
rotate(rotX, rotY)
rotate(rotX, rotY, rotZ)

引数

rotX: 数値です。回転軸を示すベクトルの X 座標です。ゼロでない場合、is2D は false になります。
rotY 省略可: 数値です。回転軸を示すベクトルの Y 座標です。ゼロでない場合、is2D は false になります。
rotZ 省略可: 数値です。回転軸を示すベクトルの Z 座標です。

rotX のみが渡された場合、rotX が Z 座標の値として使用され、X 座標と Y 座標は両方ともゼロに設定されます。

返値

DOMMatrix です。

例

const matrix = new DOMMatrix(); // 行列を作成
console.log(matrix.toString());
// 出力: "matrix(1, 0, 0, 1, 0, 0)"

const rotated = matrix.rotate(30); // 回転して代入
console.log(matrix.toString()); // 元の行列は変更されない
// 出力: "matrix(1, 0, 0, 1, 0, 0)"
console.log(rotated.toString());
// 出力: "matrix(0.866, 0.5, -0.5, 0.866, 0, 0)"