This is an experimental technology
Check the Browser compatibility table carefully before using this in production.
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.
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 onlyA boolean
flag set to true if current matrix was initialized as a 2D matrixisIdentity
Read onlyA 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 givenDOMMatrix
. DOMMatrixReadOnly.preMultiplySelf()
- Returns itself, a
DOMMatrix
, with its new content being the result of the givenDOMMatrix
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 toNaN
andis2D()
returnsfalse
. DOMMatrix.setMatrixValue()
- Returns itself, a
DOMMatrix
, with its describing the matrix representing the same transformation as the CSStransform
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 byDOMMatrix