Skip to main content

interface DOMMatrix

unstable

The DOMMatrix interface represents 4×4 matrices, suitable for 2D and 3D operations including rotation and translation. It is a mutable version of the DOMMatrixReadOnly interface. The interface is available inside web workers.

MDN

| m11 m21 m31 m41 |
| m12 m22 m32 m42 |
| m13 m23 m33 m43 |
| m14 m24 m34 m44 |

Properties #

Methods #

The invertSelf() method of the DOMMatrix interface inverts the original matrix. If the matrix cannot be inverted, the new matrix's components are all set to NaN and its is2D property is set to false.

MDN Reference

The multiplySelf() method of the DOMMatrix interface multiplies a matrix by the otherMatrix parameter, computing the dot product of the original matrix and the specified matrix: A⋅B. If no matrix is specified as the multiplier, the matrix is multiplied by a matrix in which every element is 0 except the bottom-right corner and the element immediately above and to its left: m33 and m34. These have the default value of 1.

MDN Reference

The preMultiplySelf() method of the DOMMatrix interface modifies the matrix by pre-multiplying it with the specified DOMMatrix. This is equivalent to the dot product B⋅A, where matrix A is the source matrix and B is the matrix given as an input to the method. If no matrix is specified as the multiplier, the matrix is multiplied by a matrix in which every element is 0 except the bottom-right corner and the element immediately above and to its left: m33 and m34. These have the default value of 1.

MDN Reference

#rotateAxisAngleSelf(
x?: number,
y?: number,
z?: number,
angle?: number,
): DOMMatrix

The rotateAxisAngleSelf() method of the DOMMatrix interface is a transformation method that rotates the source matrix by the given vector and angle, returning the altered matrix.

MDN Reference

#rotateFromVectorSelf(
x?: number,
y?: number,
): DOMMatrix

The rotateFromVectorSelf() method of the DOMMatrix interface is a mutable transformation method that modifies a matrix by rotating the matrix by the angle between the specified vector and (1, 0). The rotation angle is determined by the angle between the vector (1,0)T and (x,y)T in the clockwise direction, or (+/-)arctan(y/x). If x and y are both 0, the angle is specified as 0, and the matrix is not altered.

MDN Reference

#rotateSelf(
rotX?: number,
rotY?: number,
rotZ?: number,
): DOMMatrix

The rotateSelf() method of the DOMMatrix interface is a mutable transformation method that modifies a matrix. It rotates the source matrix around each of its axes by the specified number of degrees and returns the rotated matrix.

MDN Reference

#scale3dSelf(
scale?: number,
originX?: number,
originY?: number,
originZ?: number,
): DOMMatrix

The scale3dSelf() method of the DOMMatrix interface is a mutable transformation method that modifies a matrix by applying a specified scaling factor to all three axes, centered on the given origin, with a default origin of (0, 0, 0), returning the 3D-scaled matrix.

MDN Reference

#scaleSelf(
scaleX?: number,
scaleY?: number,
scaleZ?: number,
originX?: number,
originY?: number,
originZ?: number,
): DOMMatrix

The scaleSelf() method of the DOMMatrix interface is a mutable transformation method that modifies a matrix by applying a specified scaling factor, centered on the given origin, with a default origin of (0, 0), returning the scaled matrix.

MDN Reference

#setMatrixValue(transformList: string): DOMMatrix

The setMatrixValue() method of the DOMMatrix interface replaces the contents of the matrix with the matrix described by the specified transform or transforms, returning itself.

MDN Reference

#skewXSelf(sx?: number): DOMMatrix

The skewXSelf() method of the DOMMatrix interface is a mutable transformation method that modifies a matrix. It skews the source matrix by applying the specified skew transformation along the X-axis and returns the skewed matrix.

MDN Reference

#skewYSelf(sy?: number): DOMMatrix

The skewYSelf() method of the DOMMatrix interface is a mutable transformation method that modifies a matrix. It skews the source matrix by applying the specified skew transformation along the Y-axis and returns the skewed matrix.

MDN Reference

#translateSelf(
tx?: number,
ty?: number,
tz?: number,
): DOMMatrix

The translateSelf() method of the DOMMatrix interface is a mutable transformation method that modifies a matrix. It applies the specified vectors and returns the updated matrix. The default vector is [0, 0, 0].

MDN Reference

variable DOMMatrix

unstable

The DOMMatrix interface represents 4×4 matrices, suitable for 2D and 3D operations including rotation and translation. It is a mutable version of the DOMMatrixReadOnly interface. The interface is available inside web workers.

MDN

| m11 m21 m31 m41 |
| m12 m22 m32 m42 |
| m13 m23 m33 m43 |
| m14 m24 m34 m44 |

Properties #

Methods #

#fromFloat32Array(array32: Float32Array<ArrayBuffer>): DOMMatrix

The fromFloat32Array() static method of the DOMMatrix interface creates a new DOMMatrix object given an array of single-precision (32-bit) floating-point values.

MDN Reference

#fromFloat64Array(array64: Float64Array<ArrayBuffer>): DOMMatrix

The fromFloat64Array() static method of the DOMMatrix interface creates a new DOMMatrix object given an array of double-precision (64-bit) floating-point values.

MDN Reference

The fromMatrix() static method of the DOMMatrix interface creates a new DOMMatrix object given an existing matrix or an object which provides the values for its properties.

MDN Reference

Did you find what you needed?

Privacy policy