DOMMatrix (WebKitCSSMatrix)

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.

WebKitCSSMatrix is an alias to DOMMatrix.

This interface should be available inside web workers, though some implementations don't allow it yet.

Constructor

DOMMatrix()

Creates and returns a new DOMMatrix object.

Properties

This interface inherits properties from DOMMatrixReadOnly, though some of these properties are altered to be mutable.

is2D Read only

A Boolean flag whose value is true if the matrix was initialized as a 2D matrix. If false, the matrix is 3D.

isIdentity Read only

A Boolean whose value is true if the matrix is the identity matrix. The identity matrix is one in which every value is 0 except those on the main diagonal from top-left to bottom-right corner (in other words, where the offsets in each direction are equal).

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

Double-precision floating-point values representing each component of a 4×4 matrix, where m11 through m14 are the first column, m21 through m24 are the second column, and so forth.

a, b, c, d, e, f

Double-precision floating-point values representing the components of a 4×4 matrix which are required in order to perform 2D rotations and translations. These are aliases for specific components of a 4×4 matrix, as shown below.

2D 3D equivalent
a m11
b m12
c m21
d m22
e m41
f m42

Methods

This interface includes the following methods, as well as the methods it inherits from DOMMatrixReadOnly.

DOMMatrix.invertSelf()

Modifies the matrix by inverting it. If the matrix can't be inverted, its components are all set to NaN, and is2D returns false.

DOMMatrix.multiplySelf()

Modifies the matrix by post-multiplying it with the specified DOMMatrix. This is equivalent to the dot product A⋅B, where matrix A is the source matrix and B is the matrix given as an input to the method. Returns itself.

DOMMatrix.preMultiplySelf()

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. Returns itself.

DOMMatrix.translateSelf()

Modifies the matrix by applying the specified vector. The default vector is [0, 0, 0]. Returns itself.

DOMMatrix.scaleNonUniformSelf()

Modifies the matrix by applying the specified scaling on the X, Y, and Z axes, centered at the given origin. By default, the Y and Z axes' scaling factors are both 1, but the scaling factor for X must be specified. The default origin is (0, 0, 0). Returns itself.

DOMMatrix.scaleSelf()

Modifies the matrix by applying the specified scaling factors, with the center located at the specified origin. Also returns itself. By default, the scaling factor is 1 for all three axes, and the origin is (0, 0, 0). Returns itself.

DOMMatrix.scale3dSelf()

Modifies the matrix by applying the specified scaling factor to all three axes, centered on the given origin. Returns itself.

DOMMatrix.rotateSelf()

Modifies the matrix by rotating itself around each axis by the specified number of degrees. Returns itself.

DOMMatrix.rotateAxisAngleSelf()

Modifies the matrix by rotating it by the specified angle around the given vector. Returns itself.

DOMMatrix.rotateFromVectorSelf()

Modifies the matrix by rotating it by the angle between the specified vector and (1, 0). Returns itself.

DOMMatrix.setMatrixValue()

Replaces the contents of the matrix with the matrix described by the specified transform or transforms. Returns itself.

DOMMatrix.skewXSelf()

Modifies the matrix by applying the specified skew transformation along the X-axis. Returns itself.

DOMMatrix.skewYSelf()

Modifies the matrix by applying the specified skew transformation along the Y-axis. Returns itself.

Static methods

This interface inherits methods from DOMMatrixReadOnly.

fromFloat32Array()

Creates a new mutable DOMMatrix object given an array of single-precision (32-bit) floating-point values. If the array has six values, the result is a 2D matrix; if the array has 16 values, the result is a 3D matrix. Otherwise, a TypeError exception is thrown.

fromFloat64Array()

Creates a new mutable DOMMatrix object given an array of double-precision (64-bit) floating-point values. If the array has six values, the result is a 2D matrix; if the array has 16 values, the result is a 3D matrix. Otherwise, a TypeError exception is thrown.

fromMatrix()

Creates a new mutable DOMMatrix object given an existing matrix or a DOMMatrixInit dictionary which provides the values for its properties.

Usage notes

The matrix defined by the DOMMatrix interface is comprised of four rows of four columns each. While it's beyond the scope of this article to explain the mathematics involved, this 4×4 size is enough to describe any transformation you might apply to either 2D or 3D geometries.

Here are The positions of the 16 elements (m_11 through m_44) which comprise the 4×4 abstract matrix:

[ m 11 m 21 m 31 m 41 m 12 m 22 m 32 m 42 m 13 m 23 m 33 m 43 m 14 m 24 m 34 m 44 ] \left [ \begin{matrix} m_{11} & m_{21} & m_{31} & m_{41} \ m_{12} & m_{22} & m_{32} & m_{42} \ m_{13} & m_{23} & m_{33} & m_{43} \ m_{14} & m_{24} & m_{34} & m_{44} \end{matrix} \right ]

The DOMMatrix interface is designed with the intent that it will be used for all matrices within markup, supplanting the SVGMatrix and CSSMatrix interfaces.

Specifications

Specification
Geometry Interfaces Module Level 1 (Geometry Interfaces 1)
# DOMMatrix

Browser compatibility

Desktop Mobile
Chrome Edge Firefox Internet Explorer Opera Safari WebView Android Chrome Android Firefox for Android Opera Android Safari on IOS Samsung Internet
DOMMatrix
2
12
12-79
49
11
10
15
≤4
2
18
49
14
≤3
1.0
Desktop Mobile
Chrome Edge Firefox Internet Explorer Opera Safari WebView Android Chrome Android Firefox for Android Opera Android Safari on IOS Samsung Internet
DOMMatrix
61
79
33
No
48
11
61
61
33
45
11
8.0
DOMMatrix
61
79
33
No
48
11
61
61
33
45
11
8.0
a
61
79
33
No
48
11
61
61
33
45
11
8.0
b
61
79
33
No
48
11
61
61
33
45
11
8.0
c
61
79
33
No
48
11
61
61
33
45
11
8.0
d
61
79
33
No
48
11
61
61
33
45
11
8.0
e
61
79
33
No
48
11
61
61
33
45
11
8.0
f
61
79
33
No
48
11
61
61
33
45
11
8.0
fromFloat32Array
61
79
69
No
48
11
61
61
79
45
11
8.0
fromFloat64Array
61
79
69
No
48
11
61
61
79
45
11
8.0
fromMatrix
61
79
69
No
48
11
61
61
79
45
11
8.0
invertSelf
61
79
33
No
48
11
61
61
33
45
11
8.0
m11
61
79
33
No
48
11
61
61
33
45
11
8.0
m12
61
79
33
No
48
11
61
61
33
45
11
8.0
m13
61
79
33
No
48
11
61
61
33
45
11
8.0
m14
61
79
33
No
48
11
61
61
33
45
11
8.0
m21
61
79
33
No
48
11
61
61
33
45
11
8.0
m22
61
79
33
No
48
11
61
61
33
45
11
8.0
m23
61
79
33
No
48
11
61
61
33
45
11
8.0
m24
61
79
33
No
48
11
61
61
33
45
11
8.0
m31
61
79
33
No
48
11
61
61
33
45
11
8.0
m32
61
79
33
No
48
11
61
61
33
45
11
8.0
m33
61
79
33
No
48
11
61
61
33
45
11
8.0
m34
61
79
33
No
48
11
61
61
33
45
11
8.0
m41
61
79
33
No
48
11
61
61
33
45
11
8.0
m42
61
79
33
No
48
11
61
61
33
45
11
8.0
m43
61
79
33
No
48
11
61
61
33
45
11
8.0
m44
61
79
33
No
48
11
61
61
33
45
11
8.0
multiplySelf
61
79
33
No
48
11
61
61
33
45
11
8.0
preMultiplySelf
61
79
33
No
48
11
61
61
33
45
11
8.0
rotateAxisAngleSelf
61
79
33
No
48
11
61
61
33
45
11
8.0
rotateFromVectorSelf
61
79
33
No
48
11
61
61
33
45
11
8.0
rotateSelf
61
79
33
No
48
11
61
61
33
45
11
8.0
scale3dSelf
61
79
33
Starting in Firefox 69, the first parameter (scale) is now optional with a default value of 1, per the specification. Previously it was required.
No
48
11
61
61
33
Firefox for Android requires the first parameter (scale).
45
11
8.0
scaleSelf
61
79
33
Firefox 69 introduced support for the modern six-parameter syntax for scaleSelf(). Previously, it only supported the older three-parameter syntax: scale(scaleX[, originX][, originY]]]).
No
48
11
61
61
33
Firefox for Android only supports the older three-parameter syntax for scaleSelf(): scale(scaleX[, originX][, originY]]]), and not the six-parameter syntax.
45
11
8.0
setMatrixValue
61
79
33
No
48
11
61
61
33
45
11
8.0
skewXSelf
61
79
33
No
48
11
61
61
33
45
11
8.0
skewYSelf
61
79
33
No
48
11
61
61
33
45
11
8.0
translateSelf
61
79
33
No
48
11
61
61
33
45
11
8.0
worker_support
61
79
69
No
48
11
61
61
No
45
11
8.0

BCD tables only load in the browser

See also

© 2005–2021 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/API/DOMMatrix