DOMMatrixReadOnly: rotateAxisAngle() メソッド
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月.
メモ: この機能はウェブワーカー内で利用可能です。
rotateAxisAngle() は DOMMatrixReadOnly インターフェイスのメソッドで、指定されたベクトルと角度でソース行列を回転させて生成された、新しい DOMMatrix を返します。元の行列は変更されません。
行列を回転させた形に変更するには、DOMMatrix.rotateAxisAngleSelf() を参照してください。
構文
js
rotateAxisAngle()
rotateAxisAngle(rotX)
rotateAxisAngle(rotX, rotY)
rotateAxisAngle(rotX, rotY, rotZ)
rotateAxisAngle(rotX, rotY, rotZ, angle)
引数
返値
DOMMatrix です。
例
js
const matrix = new DOMMatrix(); // 行列を作成
console.log(matrix.rotateAxisAngle().toString()); // matrix(1, 0, 0, 1, 0, 0)
console.log(matrix.rotateAxisAngle(10, 20, 30).toString()); // matrix(1, 0, 0, 1, 0, 0)
console.log(matrix.rotateAxisAngle(10, 20, 30, 45).toString());
/* matrix3d(
0.728, 0.609, -0.315, 0,
-0.525, 0.791, 0.315, 0,
0.441, -0.063, 0.895,
0, 0, 0, 0, 1) */
console.log(matrix.rotateAxisAngle(5, 5, 5, -45).toString());
/* matrix3d(
0.805, -0.311, 0.506, 0,
0.506, 0.805, -0.311, 0,
-0.311, 0.506, 0.805, 0,
0, 0, 0, 1) */
console.log(matrix.toString()); // 出力: "matrix(1, 0, 0, 1, 0, 0)" (変化しない)
仕様書
| Specification |
|---|
| Geometry Interfaces Module Level 1> # dom-dommatrixreadonly-rotateaxisangle> |
ブラウザーの互換性
関連情報
DOMMatrix.rotateAxisAngleSelf()DOMMatrixReadOnly.rotate()DOMMatrixReadOnly.rotateFromVector()- CSS の
transformプロパティとrotate3d()関数 - CSS
rotateproperty - CSS 座標変換モジュール
- SVG の
transform属性 CanvasRenderingContext2Dインターフェイスとrotate()メソッド