DOMMatrixReadOnly:rotate() 方法
注意:此功能在 Web Workers 中可用。
DOMMatrixReadOnly
接口的 rotate()
方法返回一个新的 DOMMatrix
,该矩阵是通过围绕源矩阵的每个轴以指定的度数进行旋转而创建的。原始矩阵不会被更改。
要旋转时更改矩阵,请参阅 DOMMatrix.rotateSelf()
。
语法
js
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
。
示例
js
const matrix = new DOMMatrix(); // create a matrix
console.log(matrix.toString());
// output: "matrix(1, 0, 0, 1, 0, 0)"
const rotated = matrix.rotate(30); // rotation and assignment
console.log(matrix.toString()); // original matrix is unchanged
// output: "matrix(1, 0, 0, 1, 0, 0)"
console.log(rotated.toString());
// output: "matrix(0.866, 0.5, -0.5, 0.866, 0, 0)"
规范
规范 |
---|
Geometry Interfaces Module Level 1 # dom-dommatrixreadonly-rotate |
浏览器兼容性
加载中…
另见
DOMMatrix.rotateSelf()
DOMMatrixReadOnly.rotateAxisAngle()
DOMMatrixReadOnly.rotateFromVector()
- CSS
transform
属性和rotate3d()
函数 - CSS
rotate
属性 - CSS 变换模块
- SVG
transform
属性 CanvasRenderingContext2D
接口和rotate()
方法