web api instance method
DOMMatrixReadOnly: rotateAxisAngle() method
Available in workers
The rotateAxisAngle() method of the DOMMatrixReadOnly interface returns a new DOMMatrix created by rotating the source matrix by the given vector and angle. The original matrix is not altered.
To mutate the matrix as you rotate it, see rotateAxisAngleSelf().
Syntax
rotateAxisAngle()
rotateAxisAngle(rotX)
rotateAxisAngle(rotX, rotY)
rotateAxisAngle(rotX, rotY, rotZ)
rotateAxisAngle(rotX, rotY, rotZ, angle)
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 undefined, the
rotXvalue is used. If non-zero,is2Dis false.
- : A number; the y-coordinate of the vector denoting the axis of rotation. If undefined, the
rotZOptional- : A number; the z-coordinate of the vector denoting the axis of rotation. If undefined, the
rotXvalue is used.
- : A number; the z-coordinate of the vector denoting the axis of rotation. If undefined, the
angleOptional- : A number; the angle of the rotation around the axis vector, in degrees.
Return value
A DOMMatrix.
Examples
const matrix = new DOMMatrix(); // create a matrix
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()); // output: "matrix(1, 0, 0, 1, 0, 0)" (unchanged)
Specifications
SpecificationsStandards references are available on the canonical MDN page.
Browser compatibility
Browser compatibilityCompatibility data is available on the canonical MDN page.
See also
rotateAxisAngleSelf()rotate()rotateFromVector()- CSS
transformproperty androtate3d()function - CSS
rotateproperty - CSS transforms module
- SVG
transformattribute CanvasRenderingContext2Dinterface androtate()method