DOMMatrixReadOnly: rotateAxisAngle() メソッド
Baseline
広く利用可能
この機能は広く実装されており、多くのバージョンの端末やブラウザーで動作します。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)" (変化しない)
仕様書
| 仕様書 |
|---|
| Geometry Interfaces Module Level 1> # dom-dommatrixreadonly-rotateaxisangle> |
ブラウザーの互換性
関連情報
DOMMatrix.rotateAxisAngleSelf()DOMMatrixReadOnly.rotate()DOMMatrixReadOnly.rotateFromVector()- CSS の
transformプロパティとrotate3d()関数 - CSS
rotateproperty - CSS 座標変換モジュール
- SVG の
transform属性 CanvasRenderingContext2Dインターフェイスとrotate()メソッド