DOMMatrixReadOnly:rotate() 方法

Baseline 已广泛支持

此特性已相当成熟,可在许多设备和浏览器版本上使用。自 ⁨2020 年 1 月⁩ 起,所有主流浏览器均已支持。

注意:此功能在 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

浏览器兼容性

另见