The DOMMatrixReadOnly
interface represents a readonly 4×4 matrix, suitable for 2D and 3D operations. The DOMMatrix
interrface—which is based upon DOMMatrixReadOnly
—adds mutability, allowing you to alter the matrix after creating it. A 4×4 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 doesn't inherit any properties.
is2D
Read only A Boolean flag whose value is
true
if the matrix was initialized as a 2D matrix. Iffalse
, 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 is0
except those on the main diagonal from topleft to bottomright 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
 Doubleprecision floatingpoint values representing each component of a 4×4 matrix, where
m11
throughm14
are the first column,m21
throughm24
are the second column, and so forth. a
,b
,c
,d
,e
,f

Doubleprecision floatingpoint 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
Methods
This interface doesn't inherit any methods. None of the following methods alter the original matrix.
DOMMatrixReadOnly.flipX()
 Returns a new
DOMMatrix
created by flipping the source matrix around its Xaxis. This is equivalent to multiplying the matrix byDOMMatrix(1, 0, 0, 1, 0, 0)
. The original matrix is not modified. DOMMatrixReadOnly.flipY()
 Returns a new
DOMMatrix
created by flipping the source matrix around its Yaxis. This is equivalent to multiplying the matrix byDOMMatrix(1, 0, 0, 1, 0, 0)
. The original matrix is not modified. DOMMatrixReadOnly.inverse()
 Returns a new
DOMMatrix
created by inverting the source matrix. If the matrix cannot be inverted, the new matrix's components are all set toNaN
and itsis2D
property is set tofalse
. The original matrix is not altered. DOMMatrixReadOnly.multiply()
 Returns a new
DOMMatrix
created by computing the dot product of the source matrix and the specified matrix:A⋅B
. If no matrix is specified as the multiplier, the matrix is multiplied by a matrix in which every element is0
except the bottomright corner and the element immediately above and to its left:m_{33}
andm_{34}
. These have the default value of1
. The original matrix is not modified. DOMMatrixReadOnly.rotateAxisAngle()
 Returns a new
DOMMatrix
created by rotating the source matrix by the given angle around the specified vector. The original matrix is not modified. DOMMatrixReadOnly.rotate()
 Returns a new
DOMMatrix
created by rotating the source matrix around each of its axes by the specified number of degrees. The original matrix is not altered. DOMMatrixReadOnly.rotateFromVector()
 Returns a new
DOMMatrix
created by rotating the source matrix by the angle between the specified vector and(1, 0)
. The original matrix is not modified. DOMMatrixReadOnly.scale()
 Returns a new
DOMMatrix
created by scaling the source matrix by the amount specified for each axis, centered on the given origin. By default, the X and Z axes are scaled by1
and the Y axis has no default scaling value. The default origin is(0, 0, 0)
. The original matrix is not modified. DOMMatrixReadOnly.scale3d()
 Returns a new
DOMMatrix
created by scaling the source 3D matrix by the given factor along all its axes, centered on the specified origin point. The default origin is(0, 0, 0)
. The original matrix is not modified. DOMMatrixReadOnly.scaleNonUniform()
 Returns a new
DOMMatrix
created 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 both1
, but the scaling factor for X must be specified. The default origin is(0, 0, 0)
. The original matrix is not changed. DOMMatrixReadOnly.skewX()
 Returns a new
DOMMatrix
created by applying the specified skew transformation to the source matrix along its Xaxis. The original matrix is not modified. DOMMatrixReadOnly.skewY()
 Returns a new
DOMMatrix
created by applying the specified skew transformation to the source matrix along its Yaxis. The original matrix is not modified. DOMMatrixReadOnly.toFloat32Array()
 Returns a new
Float32Array
containing all 16 elements (m11
,m12
,m13
,m14
,m21
,m22
,m23
,m24
,m31
,m32
,m33
,m34
,m41
,m42
,m43
,m44
) which comprise the matrix. The elements are stored into the array as singleprecision floatingpoint numbers in columnmajor (colexographical access, or "colex") order. (In other words, down the first column from top to bottom, then the second column, and so forth.) DOMMatrixReadOnly.toFloat64Array()
 Returns a new
Float64Array
containing all 16 elements (m11
,m12
,m13
,m14
,m21
,m22
,m23
,m24
,m31
,m32
,m33
,m34
,m41
,m42
,m43
,m44
) which comprise the matrix. The elements are stored into the array as doubleprecision floatingpoint numbers in columnmajor (colexographical access access or "colex") order. (In other words, down the first column from top to bottom, then the second column, and so forth.) DOMMatrixReadOnly.toJSON()
 Returns a JSON representation of the
DOMMatrixReadOnly
object. DOMMatrixReadOnly.toString()

Creates and returns a
DOMString
object which contains a string representation of the matrix in CSS matrix syntax, using the appropriate CSS matrix notation. See thematrix()
CSS function for details on this syntax.For a 2D matrix, the elements
a
throughf
are listed, for a total of six values and the formmatrix(a, b, c, d, e, f)
.For a 3D matrix, the returned string contains all 16 elements and takes the form
matrix3d(m_{11}, m_{12}, m_{13}, m_{14}, m_{21}, m_{22}, m_{23}, m_{24}, m_{31}, m_{32}, m_{33}, m_{34}, m_{41}, m_{42}, m_{43}, m_{44})
. See the CSSmatrix3d()
function for details on the 3D notation's syntax.Throws an
InvalidStateError
exception if any of the elements in the matrix are nonfinite (even if, in the case of a 2D matrix, the nonfinite values are in elements not used by the 2D matrix representation). DOMMatrixReadOnly.transformPoint()
 Transforms the specified point using the matrix, returning a new
DOMPoint
object containing the transformed point. Neither the matrix nor the original point are altered. DOMMatrixReadOnly.translate()
 Returns a new
DOMMatrix
containing a matrix calculated by translating the source matrix using the specified vector. By default, the vector is(0, 0, 0)
. The original matrix is not changed.
Static methods
This interface inherits methods from DOMMatrixReadOnly
.
fromFloat32Array()
 Creates a new mutable
DOMMatrix
object given an array of singleprecision (32bit) floatingpoint 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, aTypeError
exception is thrown. fromFloat64Array()
 Creates a new mutable
DOMMatrix
object given an array of doubleprecision (64bit) floatingpoint 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, aTypeError
exception is thrown. fromMatrix()
 Creates a new mutable
DOMMatrix
object given an existing matrix or aDOMMatrixInit
dictionary which provides the values for its properties. If no matrix is specified, the matrix is initialized with every element set to0
except the bottomright corner and the element immediately above and to its left:m_{33}
andm_{34}
. These have the default value of1
.
Specifications
Specification  Status  Comment 

Geometry Interfaces Module Level 1 The definition of 'DOMMatrixReadOnly' in that specification. 
Candidate Recommendation  Initial definition 
Browser compatibility
BCD tables only load in the browser