web api instance method
DOMMatrixReadOnly: rotate() method
Available in workers
The rotate() method of the DOMMatrixReadOnly interface returns a new DOMMatrix created by rotating the source matrix around each of its axes by the specified number of degrees. The original matrix is not altered.
To mutate the matrix as you rotate it, see rotateSelf().
Syntax
rotate()
rotate(rotX)
rotate(rotX, rotY)
rotate(rotX, rotY, rotZ)
Parameters
rotX- : A number; the x-coordinate of the vector denoting the axis of rotation. If non-zero,
is2Dis false.
- : A number; the x-coordinate of the vector denoting the axis of rotation. If non-zero,
rotYOptional- : A number; the y-coordinate of the vector denoting the axis of rotation. If non-zero,
is2Dis false.
- : A number; the y-coordinate of the vector denoting the axis of rotation. If non-zero,
rotZOptional- : A number; the z-coordinate of the vector denoting the axis of rotation.
If only rotX is passed, then rotX is used as the value for the z-coordinate, and the x- and -y-coordinates are both set to zero.
Return value
A DOMMatrix.
Examples
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)"
Specifications
SpecificationsStandards references are available on the canonical MDN page.
Browser compatibility
Browser compatibilityCompatibility data is available on the canonical MDN page.
See also
rotateSelf()rotateAxisAngle()rotateFromVector()- CSS
transformproperty androtate3d()function - CSS
rotateproperty - CSS transforms module
- SVG
transformattribute CanvasRenderingContext2Dinterface androtate()method