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`** and **`SVGMatrix`** are aliases to **`DOMMatrix`**.

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

DOMMatrixReadOnly

DOMMatrixConstructor
-----------

`DOMMatrix()`

Creates and returns a new `DOMMatrix` object.

Instance 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` |

Instance 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()` 
Deprecated

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.

Specifications
--------------

| Specification |
| --- |
| Geometry Interfaces Module Level 1 # DOMMatrix |

Browser compatibility
---------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

See also
--------

* Its non-modifiable counterpart, `DOMMatrixReadOnly`