{{APIRef}}{{SeeCompatTable}}
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 doesn't allow it yet.
Properties
This interface inherits properties from {{domxref("DOMMatrixReadOnly")}}, though some are modified not to be read-only..
-
m11
,m12
,m13
,m14
,m21
,m22
,m23
,m2
,4
,m31
,m32
,m33
,m34
,m41
,m42
,m43
m4
-
Are
double
representing each component of a 4x4 matrix. -
a
,b
,c
,d
,e
,f
{{ReadOnlyInline}} -
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 {{domxref("DOMMatrixReadOnly")}}
- {{domxref("DOMMatrixReadOnly.multiplySelf()")}}
- Returns itself, a {{domxref("DOMMatrix")}}, with its new content being the result of the original matrix being multiply by the given {{domxref("DOMMatrix")}}.
- {{domxref("DOMMatrix.translateSelf()")}}
- Returns itself, a {{domxref("DOMMatrix")}}, with its new content being the result of the matrix being translated by the given vector.
- {{domxref("DOMMatrix.scaleSelf()")}}
- Returns itself, a {{domxref("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.
- {{domxref("DOMMatrix.scale3dSelf()")}}
- Returns itself, a {{domxref("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.
- {{domxref("DOMMatrix.scaleNonUniformSelf()")}}
- Returns itself, a {{domxref("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.
- {{domxref("DOMMatrix.rotateSelf()")}}
- Returns itself, a {{domxref("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.
- {{domxref("DOMMatrix.rotateFromVectorSelf()")}}
- Returns itself, a {{domxref("DOMMatrix")}}, with its new contentbeing the result of the original matrix being rotated by the angle between the given vector and (1,0), centered on the origin given.
- {{domxref("DOMMatrix.rotateAxisAngleSelf()")}}
- Returns itself, a {{domxref("DOMMatrix")}}, with its new content being the result of the original matrix being rotated by the given angle and the give vector.
- {{domxref("DOMMatrix.skewXSelf()")}}
- Returns itself, a {{domxref("DOMMatrix")}}, with its new content eing the result of the original matrix being skewed along the x-axis by the given factor.
- {{domxref("DOMMatrix.skewYSelf()")}}
- Returns itself, a {{domxref("DOMMatrix")}}, with its new content being the result of the original matrix being skewed along the y-axis by the given factor.
- {{domxref("DOMMatrixReadOnly.invertSelf()")}}
-
Returns itself, a {{domxref("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
andis2D()
returnsfalse
.
Specifications
Specification | Status | Comment |
---|---|---|
{{ SpecName('Geometry Interfaces', '#dom-dommatrix', 'DOMMatrix') }} | {{ Spec2('Geometry Interfaces') }} | Initial definition |
Browser compatibility
{{CompatibilityTable}}
Feature | Firefox (Gecko) | Chrome | Internet Explorer | Opera | Safari |
---|---|---|---|---|---|
Basic support | {{CompatGeckoDesktop(33)}} | {{CompatUnknown}} | {{CompatNo}} | {{CompatUnknown}} | {{CompatNo}} |
Availability on Web workers | {{CompatNo}} | {{CompatUnknown}} | {{CompatNo}} | {{CompatUnknown}} | {{CompatNo}} |
Feature | Firefox Mobile (Gecko) | Android | IE Mobile | Opera Mobile | Safari Mobile |
---|---|---|---|---|---|
Basic support | {{CompatGeckoMobile(33)}} | {{CompatUnknown}} | {{CompatNo}} | {{CompatUnknown}} | {{CompatNo}} |
Availability on Web workers | {{CompatNo}} | {{CompatUnknown}} | {{CompatNo}} | {{CompatUnknown}} | {{CompatNo}} |
See also
- Its non-modifiable part, {{domxref("DOMMatrixReadOnly")}}
- {{domxref("SVGMatrix")}}, the SVG matrix intended to be superseded by {{domxref("DOMMatrix")}}