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. Iffalse
, 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 is0
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
throughm14
are the first column,m21
throughm24
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
, andis2D
returnsfalse
. DOMMatrix.multiplySelf()
- Modifies the matrix by post-multiplying it with the specified
DOMMatrix
. This is equivalent to the dot productA⋅B
, where matrixA
is the source matrix andB
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 productB⋅A
, where matrixA
is the source matrix andB
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, aTypeError
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, aTypeError
exception is thrown. fromMatrix()
- Creates a new mutable
DOMMatrix
object given an existing matrix or aDOMMatrixInit
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.
<math display="block">\begin{bmatrix} 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{bmatrix}</math> The positions of the 16 elements (m11 through m44) which comprise the 4×4 abstract matrix.
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 | Status | Comment |
---|---|---|
Geometry Interfaces Module Level 1The definition of 'DOMMatrix' in that specification. | Candidate Recommendation | Initial definition |
Browser compatibility
The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request.
Update compatibility data on GitHub
Desktop | Mobile | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
DOMMatrix
|
Chrome
Full support 61 |
Edge
Full support 79 |
Firefox
Full support 33 |
IE
No support No |
Opera
Full support 48 |
Safari
Full support 11 |
WebView Android
Full support 61 |
Chrome Android
Full support 61 |
Firefox Android
Full support 33 |
Opera Android
Full support 45 |
Safari iOS
Full support 11 |
Samsung Internet Android
Full support 8.0 |
DOMMatrix() constructor
|
Chrome
Full support 61 |
Edge
Full support 79 |
Firefox
Full support 33 |
IE
No support No |
Opera
Full support 48 |
Safari
Full support 11 |
WebView Android
Full support 61 |
Chrome Android
Full support 61 |
Firefox Android
Full support 33 |
Opera Android
Full support 45 |
Safari iOS
Full support 11 |
Samsung Internet Android
Full support 8.0 |
scale3dSelf()
|
Chrome
Full support 61 |
Edge
Full support 79 |
Firefox Full support 33 Full support 33 Notes' Starting in Firefox 69, the first parameter ( |
IE
No support No |
Opera
Full support 48 |
Safari
Full support 11 |
WebView Android
Full support 61 |
Chrome Android
Full support 61 |
Firefox Android Full support 33 Full support 33 Notes' Firefox for Android requires the first parameter ( |
Opera Android
Full support 45 |
Safari iOS
Full support 11 |
Samsung Internet Android
Full support 8.0 |
scaleSelf()
|
Chrome
Full support 61 |
Edge
Full support 79 |
Firefox Full support 33 Full support 33 Notes' Firefox 69 introduced support for the modern six-parameter syntax for |
IE
No support No |
Opera
Full support 48 |
Safari
Full support 11 |
WebView Android
Full support 61 |
Chrome Android
Full support 61 |
Firefox Android Partial support 33 Partial support 33 Notes' Firefox for Android only supports the older three-parameter syntax for |
Opera Android
Full support 45 |
Safari iOS
Full support 11 |
Samsung Internet Android
Full support 8.0 |
Available in workers | Chrome
Full support 61 |
Edge
Full support 79 |
Firefox
Full support 69 |
IE
No support No |
Opera
Full support 48 |
Safari
Full support 11 |
WebView Android
Full support 61 |
Chrome Android
Full support 61 |
Firefox Android
No support No |
Opera Android
Full support 45 |
Safari iOS
Full support 11 |
Samsung Internet Android
Full support 8.0 |
Legend
- Full support
- Full support
- Partial support
- Partial support
- No support
- No support
- See implementation notes.'
- See implementation notes.
Update compatibility data on GitHub
Desktop | Mobile | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
WebKitCSSMatrix
|
Chrome
? |
Edge Full support 12 Full support 12 No support 12 — 79 Alternate Name' Uses the non-standard name: |
Firefox
? |
IE Full support 11 Full support 11 Full support 10 Alternate Name' Uses the non-standard name: |
Opera
? |
Safari
Full support Yes |
WebView Android
? |
Chrome Android
? |
Firefox Android
? |
Opera Android
? |
Safari iOS
Full support Yes |
Samsung Internet Android
? |
Legend
- Full support
- Full support
- Compatibility unknown
- Compatibility unknown
- Uses a non-standard name.'
- Uses a non-standard name.
See also
- Its non-modifiable counterpart,
DOMMatrixReadOnly
SVGMatrix
, the SVG matrix intended to be superseded byDOMMatrix
DOMMatrix (WebKitCSSMatrix) by Mozilla Contributors is licensed under CC-BY-SA 2.5.