W3cubDocs

DOMMatrixReadOnly

The DOMMatrixReadOnly interface represents 4x4 matrices, suitable for 2D and 3D operations. If this interface defines only read-only matrices, the DOMMatrix interface which inherits from it, add all the properties and the methods to allow to have modifiable matrices.

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 doesn't inherit any other property.

m11, m12, m13, m14, m21, m22, m23, m24, m31, m32, m33, m34, m41, m42, m43, m44 Read only

Are double representing each component of a 4x4 matrix. They are read-only, but their counterpart, with the same name, in DOMMatrix aren't.

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`

They are read-only, but their counterpart, with the same name, in DOMMatrix aren't.

DOMMatrixReadOnly.is2D Read only

Is a Boolean indicating if the matrix contains a 2D matrix and only accept 2D transformations.

DOMMatrixReadOnly.isIdentity Read only

Is a Boolean indincating if the matrix identity, that is a matrix with 1 on the components of its diagonal, and 0 elsewhere.

Methods

This interface doesn't inherit any method.

DOMMatrixReadOnly.flipX(): Returns a DOMMatrix containing a new matrix being the result of the original matrix being flipped around the x-axis, that is multiplied by the DOMMatrix(-1, 0, 0, 1, 0, 0). The original matrix is not modified.
DOMMatrixReadOnly.flipY(): Returns a DOMMatrix containing a new matrix being the result of the original matrix being flipped around the y-axis, that is multiplied by the DOMMatrix(1, 0, 0, -1, 0, 0). The original matrix is not modified.
DOMMatrixReadOnly.inverse(): Returns a DOMMatrix containing a new matrix being the result of the original matrix being inverted. The original matrix is not modified. If the matrix cannot be inverted, all its components are set to NaN and is2D() returns false.
DOMMatrixReadOnly.multiply(): Returns a DOMMatrix containing a new matrix being the result of the original matrix being multiplied by the given DOMMatrix. The original matrix is not modified.
DOMMatrixReadOnly.rotateAxisAngle(): Returns a DOMMatrix containing a new matrix being the result of the original matrix being rotated by the given angle and the given vector. The original matrix is not modified.
DOMMatrixReadOnly.rotate(): Returns a DOMMatrix containing a new matrix being the result of the original matrix being rotated by the given angle, with the rotation centered on the origin given. The original matrix is not modified.
DOMMatrixReadOnly.rotateFromVector(): Returns a DOMMatrix containing a new matrix being the result of the original matrix being rotated by the angle between the given vector and (1,0), centered on the origin given. The original matrix is not modified.
DOMMatrixReadOnly.scale(): Returns a DOMMatrix containing a new matrix being the result of the matrix x and y dimensions being scaled by the given factor, centered on the origin given. The original matrix is not modified.
DOMMatrixReadOnly.scale3d(): Returns a DOMMatrix containing a new matrix being the result of the matrix x, y and z dimension being scaled by the given factor, centered on the origin given. The original matrix is not modified.
DOMMatrixReadOnly.scaleNonUniform(): Returns a DOMMatrix containing a new matrix 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. The original matrix is not modified.
DOMMatrixReadOnly.skewX(): Returns a DOMMatrix containing a new matrix being the result of the original matrix being skewed along the x-axis by the given factor. The original matrix is not modified.
DOMMatrixReadOnly.skewY(): Returns a DOMMatrix containing a new matrix being the result of the original matrix being skewed along the y-axis by the given factor. The original matrix is not modified.
DOMMatrixReadOnly.toFloat32Array(): Returns a Float32Array containing the 6 components (a, b, c, d, e, f) in the case of a 2D matrix or the 16 components (m11, m12, m13, m14, m21, m22, m23, m24, m31, m32, m33, m34, m41, m42, m43, m44) for a 3D matrix.
DOMMatrixReadOnly.toFloat64Array(): Returns a Float64Array containing the 6 components (a, b, c, d, e, f) in the case of a 2D matrix or the 16 components (m11, m12, m13, m14, m21, m22, m23, m24, m31, m32, m33, m34, m41, m42, m43, m44) for a 3D matrix.
DOMMatrixReadOnly.toJSON(): Returns a JSON representation of the DOMMatrixReadOnly object.
DOMMatrixReadOnly.toString(): Returns a DOMString containing the 6 components separated by a ',' and prefixed by the CSS matrix functional notation, as 'matrix (a, b, c, d, e, f)', in the case of a 2D matrix or matrix3d functional notation and the 16 components,'matrix3d(m11, m12, m13, m14, m21, m22, m23, m24, m31, m32, m33, m34, m41, m42, m43, m44)', for a 3D matrix.
DOMMatrixReadOnly.transformPoint(): Returns a DOMPoint that is the point given in parameter multiplied by the matrix. But the original point and the matrix aren't modified.
DOMMatrixReadOnly.translate(): Returns a DOMMatrix containing a new matrix being the result of the matrix being translated by the given vector. The original matrix is not modified.

Specifications

Specification	Status	Comment
Geometry Interfaces Module Level 1 The definition of 'DOMMatrixReadOnly' in that specification.	Candidate Recommendation	Initial definition

Browser compatibilityUpdate compatibility data on GitHub

	Desktop
	Chrome	Edge	Firefox	Internet Explorer	Opera	Safari
Basic support	61	No	33	No	48	No
Support in web workers	61	No	No	No	48	No
`DOMMatrixReadOnly()` constructor	61	No	33	No	48	No
`m11`	61	No	33	No	48	No
`m12`	61	No	33	No	48	No
`m13`	61	No	33	No	48	No
`m14`	61	No	33	No	48	No
`m21`	61	No	33	No	48	No
`m22`	61	No	33	No	48	No
`m23`	61	No	33	No	48	No
`m24`	61	No	33	No	48	No
`m31`	61	No	33	No	48	No
`m32`	61	No	33	No	48	No
`m33`	61	No	33	No	48	No
`m34`	61	No	33	No	48	No
`m41`	61	No	33	No	48	No
`m42`	61	No	33	No	48	No
`m43`	61	No	33	No	48	No
`m44`	61	No	33	No	48	No
`a`	61	No	33	No	48	No
`b`	61	No	33	No	48	No
`c`	61	No	33	No	48	No
`d`	61	No	33	No	48	No
`e`	61	No	33	No	48	No
`f`	61	No	33	No	48	No
`is2D`	61	No	33	No	48	No
`isIdentity`	61	No	33	No	48	No
`flipX`	61	No	33	No	48	No
`flipY`	61	No	33	No	48	No
`inverse`	61	No	33	No	48	No
`multiply`	61	No	33	No	48	No
`rotate`	61	No	33	No	48	No
`rotateAxisAngle`	61	No	33	No	48	No
`rotateFromVector`	61	No	33	No	48	No
`scale`	61	No	33	No	48	No
`scale3d`	61	No	33	No	48	No
`scaleNonUniform`	61	No	33	No	48	No
`skewX`	61	No	33	No	48	No
`skewY`	61	No	33	No	48	No
`toFloat32Array`	61	No	33	No	48	No
`toFloat64Array`	61	No	33	No	48	No
`toJSON`	61	No	33	No	48	No
`toString`	61	No	33	No	48	No
`transform`	61	No	33	No	48	No
`transformPoint`	61	No	33	No	48	No

	Mobile
	Android webview	Chrome for Android	Edge Mobile	Firefox for Android	Opera for Android	iOS Safari	Samsung Internet
Basic support	61	61	No	33	48	No	?
Support in web workers	61	61	No	No	48	No	?
`DOMMatrixReadOnly()` constructor	61	61	No	33	48	No	?
`m11`	61	61	No	33	48	No	?
`m12`	61	61	No	33	48	No	?
`m13`	61	61	No	33	48	No	?
`m14`	61	61	No	33	48	No	?
`m21`	61	61	No	33	48	No	?
`m22`	61	61	No	33	48	No	?
`m23`	61	61	No	33	48	No	?
`m24`	61	61	No	33	48	No	?
`m31`	61	61	No	33	48	No	?
`m32`	61	61	No	33	48	No	?
`m33`	61	61	No	33	48	No	?
`m34`	61	61	No	33	48	No	?
`m41`	61	61	No	33	48	No	?
`m42`	61	61	No	33	48	No	?
`m43`	61	61	No	33	48	No	?
`m44`	61	61	No	33	48	No	?
`a`	61	61	No	33	48	No	?
`b`	61	61	No	33	48	No	?
`c`	61	61	No	33	48	No	?
`d`	61	61	No	33	48	No	?
`e`	61	61	No	33	48	No	?
`f`	61	61	No	33	48	No	?
`is2D`	61	61	No	33	48	No	?
`isIdentity`	61	61	No	33	48	No	?
`flipX`	61	61	No	33	48	No	?
`flipY`	61	61	No	33	48	No	?
`inverse`	61	61	No	33	48	No	?
`multiply`	61	61	No	33	48	No	?
`rotate`	61	61	No	33	48	No	?
`rotateAxisAngle`	61	61	No	33	48	No	?
`rotateFromVector`	61	61	No	33	48	No	?
`scale`	61	61	No	33	48	No	?
`scale3d`	61	61	No	33	48	No	?
`scaleNonUniform`	61	61	No	33	48	No	?
`skewX`	61	61	No	33	48	No	?
`skewY`	61	61	No	33	48	No	?
`toFloat32Array`	61	61	No	33	48	No	?
`toFloat64Array`	61	61	No	33	48	No	?
`toJSON`	61	61	No	33	48	No	?
`toString`	61	61	No	33	48	No	?
`transform`	61	61	No	33	48	No	?
`transformPoint`	61	61	No	33	48	No	?

DOMMatrixReadOnly

Properties

Methods

Specifications

Browser compatibilityUpdate compatibility data on GitHub

See also