DOMMatrix

This is an experimental technology
Because this technology's specification has not stabilized, check the compatibility table for usage in various browsers. Also note that the syntax and behavior of an experimental technology is subject to change in future versions of browsers as the specification changes.

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

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.

Properties

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

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 Read only
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 Firefox (Gecko) Chrome Internet Explorer Opera Safari
Basic support 33 (33) ? No support ? No support
Availability on Web workers No support ? No support ? No support
Feature Firefox Mobile (Gecko) Android IE Mobile Opera Mobile Safari Mobile
Basic support 33.0 (33) ? No support ? No support
Availability on Web workers No support ? No support ? No support

See also

Document Tags and Contributors

 Contributors to this page: jwhitlock, teoli, Matte_000, Jeree
 Last updated by: jwhitlock,