* * **This is an experimental technology**

Check the Browser compatibility table carefully before using this in production.

The

interface represents 4x4 matrices, suitable for 2D and 3D operations.**DOMMatrix**

A 4x4 matrix is suitable to describe any rotation and translation in 3D.

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

## Constructor

`DOMMatrix()`

- Creates a new DOMMatrix object.

## Properties

*This interface inherits properties from DOMMatrixReadOnly, though some are modified not to be read-only.*

`is2D`

Read only`A boolean`

flag set to true if current matrix was initialized as a 2D matrix`isIdentity`

Read only`A boolean`

flag returning true if the current matrix is identity.`m11`

,`m12`

,`m13`

,`m14`

,`m21`

,`m22`

,`m23`

,`m24`

,`m31`

,`m32`

,`m33`

,`m34`

,`m41`

,`m42`

,`m43`

,`m44`

- Are
`double`

representing each component of a 4x4 matrix. `a`

,`b`

,`c`

,`d`

,`e`

,`f`

- Are
`double`

representing each component of a 4x4 matrix needed for 2D rotations and translations. They are aliases for some components of the 4x4 matrix:`2D`

`3D equivalent`

`a`

`m11`

`b`

`m12`

`c`

`m21`

`d`

`m22`

`e`

`m41`

`f`

`m42`

## Methods

*This interface inherits methods from DOMMatrixReadOnly.*

`DOMMatrixReadOnly.multiplySelf()`

- Returns itself, a
`DOMMatrix`

, with its new content being the result of the original matrix being multiplied by the given`DOMMatrix`

. `DOMMatrixReadOnly.preMultiplySelf()`

- Returns itself, a
`DOMMatrix`

, with its new content being the result of the given`DOMMatrix`

being multiplied by the original matrix. `DOMMatrix.translateSelf()`

- Returns itself, a
`DOMMatrix`

, with its new content being the result of the matrix being translated by the given vector. `DOMMatrix.scaleSelf()`

- Returns itself, a
`DOMMatrix`

, with its new content being the result of the matrix x and y dimensions being scaled by the given factor, centered on the origin given. `DOMMatrix.scale3dSelf()`

- Returns itself, a
`DOMMatrix`

, with its new content being the result of the matrix x, y and z dimension being scaled by the given factor, centered on the origin given. `DOMMatrix.scaleNonUniformSelf()`

- Returns itself, a
`DOMMatrix`

, with its new content being the result of the matrix x, y and z dimension being scaled by the given factor for each dimension, centered on the origin given. `DOMMatrix.rotateSelf()`

- Returns itself, a
`DOMMatrix`

, with its new content being the result of the original matrix being rotated by the given angle, with the rotation centered on the origin given. `DOMMatrix.rotateFromVectorSelf()`

- Returns itself, a
`DOMMatrix`

, with its new content being the result of the original matrix being rotated by the angle between the given vector and (1,0), centered on the origin given. `DOMMatrix.rotateAxisAngleSelf()`

- Returns itself, a
`DOMMatrix`

, with its new content being the result of the original matrix being rotated by the given angle and the give vector. `DOMMatrix.skewXSelf()`

- Returns itself, a
`DOMMatrix`

, with its new content being the result of the original matrix being skewed along the x-axis by the given factor. `DOMMatrix.skewYSelf()`

- Returns itself, a
`DOMMatrix`

, with its new content being the result of the original matrix being skewed along the y-axis by the given factor. `DOMMatrix.invertSelf()`

- Returns itself, a
`DOMMatrix`

, with its new content being the result of the original matrix being inverted. If the matrix cannot be inverted, all its components are set to`NaN`

and`is2D()`

returns`false`

. `DOMMatrix.setMatrixValue()`

- Returns itself, a
`DOMMatrix`

, with its describing the matrix representing the same transformation as the CSS`transform`

functions given in parameter.

## Specifications

Specification | Status | Comment |
---|---|---|

Geometry Interfaces Module Level 1 The definition of 'DOMMatrix' in that specification. |
Candidate Recommendation | Initial definition |

## Browser compatibility

Feature | Chrome | Firefox (Gecko) | Edge | Internet Explorer | Opera | Safari |
---|---|---|---|---|---|---|

Basic support | 61 | 33 (33) | No support | No support | 48 | No support |

Availability on Web workers | 61 | No support | No support | No support | 48 | No support |

Feature | Android Webview | Chrome for Android | Firefox Mobile (Gecko) | Android | IE Mobile | Opera Mobile | Safari Mobile |
---|---|---|---|---|---|---|---|

Basic support | 61 | 61 | 33.0 (33) | ? | No support | 48 | No support |

Availability on Web workers | 61 | 61 | No support | ? | No support | 48 | No support |

## See also

- Its non-modifiable part,
`DOMMatrixReadOnly`

`SVGMatrix`

, the SVG matrix intended to be superseded by`DOMMatrix`