W3cubDocs

/Web APIs

DOMMatrixReadOnly

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since ⁨January 2020⁩.

Note: This feature is available in Web Workers.

The DOMMatrixReadOnly interface represents a read-only 4×4 matrix, suitable for 2D and 3D operations. The DOMMatrix interface — which is based upon DOMMatrixReadOnly—adds mutability, allowing you to alter the matrix after creating it.

This interface should be available inside web workers, though some implementations doesn't allow it yet.

Constructor

DOMMatrixReadOnly(): Creates a new DOMMatrixReadOnly object.

Instance properties

This interface doesn't inherit any properties.

DOMMatrixReadOnly.is2D Read only

A Boolean flag whose value is true if the matrix was initialized as a 2D matrix. If false, the matrix is 3D.

DOMMatrixReadOnly.isIdentity Read only

A Boolean whose value is true if the matrix is an identity matrix.

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

Double-precision floating-point values representing each component of a 4×4 matrix, where m11 through m14 are the first column, m21 through m24 are the second column, and so forth.

a, b, c, d, e, f

Double-precision floating-point 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`

Instance 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 X-axis. This is equivalent to multiplying the matrix by DOMMatrix(-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 Y-axis. This is equivalent to multiplying the matrix by DOMMatrix(1, 0, 0, -1, 0, 0). The original matrix is not modified.
DOMMatrixReadOnly.inverse(): Returns a new DOMMatrix created by inverting the source matrix. 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. The original matrix is not
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 by 1 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() Deprecated: 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 both 1, 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 X-axis. 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 Y-axis. The original matrix is not modified.
DOMMatrixReadOnly.toFloat32Array(): Returns a new Float32Array of single-precision floating-point numbers, containing all 16 elements which comprise the matrix.
DOMMatrixReadOnly.toFloat64Array(): Returns a new Float64Array of double-precision floating-point numbers, containing all 16 elements which comprise the matrix.
DOMMatrixReadOnly.toJSON(): Returns a JSON representation of the DOMMatrixReadOnly object.
DOMMatrixReadOnly.toString(): Creates and returns a string representation of the matrix in CSS matrix syntax, using the appropriate CSS matrix notation.
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

fromFloat32Array(): Creates a new mutable DOMMatrix object given an array of single-precision (32-bit) floating-point 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, a TypeError exception is thrown.
fromFloat64Array(): Creates a new mutable DOMMatrix object given an array of double-precision (64-bit) floating-point 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, a TypeError exception is thrown.
fromMatrix(): Creates a new mutable DOMMatrix object given an existing matrix or an object which provides the values for its properties. If no matrix is specified, the matrix is initialized with every element set to 0 except the bottom-right corner and the element immediately above and to its left: m33 and m34. These have the default value of 1.

Specifications

Specification
Geometry Interfaces Module Level 1> # DOMMatrix>

Browser compatibility

	Desktop					Mobile
	Chrome	Edge	Firefox	Opera	Safari	Chrome Android	Firefox for Android	Opera Android	Safari on IOS	Samsung Internet	WebView Android	WebView on iOS
`DOMMatrixReadOnly`	61	79	62	48	11	61	62	45	11	8.0	61	11
`DOMMatrixReadOnly`	61	79	33	48	11	61	33	45	11	8.0	61	11
`a`	61	79	33	48	11	61	33	45	11	8.0	61	11
`b`	61	79	33	48	11	61	33	45	11	8.0	61	11
`c`	61	79	33	48	11	61	33	45	11	8.0	61	11
`d`	61	79	33	48	11	61	33	45	11	8.0	61	11
`e`	61	79	33	48	11	61	33	45	11	8.0	61	11
`f`	61	79	33	48	11	61	33	45	11	8.0	61	11
`flipX`	61	79	33	48	11	61	33	45	11	8.0	61	11
`flipY`	61	79	33	48	11	61	33	45	11	8.0	61	11
`fromFloat32Array_static`	61	79	69	48	11	61	79	45	11	8.0	61	11
`fromFloat64Array_static`	61	79	69	48	11	61	79	45	11	8.0	61	11
`fromMatrix_static`	61	79	69	48	11	61	79	45	11	8.0	61	11
`inverse`	61	79	33	48	11	61	33	45	11	8.0	61	11
`is2D`	61	79	33	48	11	61	33	45	11	8.0	61	11
`isIdentity`	61	79	59	48	11	61	59	45	11	8.0	61	11
`m11`	61	79	33	48	11	61	33	45	11	8.0	61	11
`m12`	61	79	33	48	11	61	33	45	11	8.0	61	11
`m13`	61	79	33	48	11	61	33	45	11	8.0	61	11
`m14`	61	79	33	48	11	61	33	45	11	8.0	61	11
`m21`	61	79	33	48	11	61	33	45	11	8.0	61	11
`m22`	61	79	33	48	11	61	33	45	11	8.0	61	11
`m23`	61	79	33	48	11	61	33	45	11	8.0	61	11
`m24`	61	79	33	48	11	61	33	45	11	8.0	61	11
`m31`	61	79	33	48	11	61	33	45	11	8.0	61	11
`m32`	61	79	33	48	11	61	33	45	11	8.0	61	11
`m33`	61	79	33	48	11	61	33	45	11	8.0	61	11
`m34`	61	79	33	48	11	61	33	45	11	8.0	61	11
`m41`	61	79	33	48	11	61	33	45	11	8.0	61	11
`m42`	61	79	33	48	11	61	33	45	11	8.0	61	11
`m43`	61	79	33	48	11	61	33	45	11	8.0	61	11
`m44`	61	79	33	48	11	61	33	45	11	8.0	61	11
`multiply`	61	79	33	48	11	61	33	45	11	8.0	61	11
`rotate`	61	79	33	48	11	61	33	45	11	8.0	61	11
`rotateAxisAngle`	61	79	33	48	11	61	33	45	11	8.0	61	11
`rotateFromVector`	61	79	33	48	11	61	33	45	11	8.0	61	11
`scale`	61	79	33 Firefox 69 introduced support for the modern six-parameter syntax for `scale()`. Previously, it only supported the older three-parameter syntax: `scale(scaleX[, originX][, originY]]])`.	48	11	61	33 Firefox for Android 79 introduced support for the modern six-parameter syntax for `scale()`. Previously, it only supported the older three-parameter syntax: `scale(scaleX[, originX][, originY]]])`.	45	11	8.0	61	11
`scale3d`	61	79	33 Starting in Firefox 69, the first parameter (`scale`) is now optional with a default value of 1, per the specification. Previously it was required.	48	11	61	33 Starting in Firefox for Android 79, the first parameter (`scale`) is now optional with a default value of 1, per the specification. Previously it was required.	45	11	8.0	61	11
`scaleNonUniform`	73	79	33	60	17.4	73	33	52	17.4	11.0	73	17.4
`skewX`	61	79	33 Before Firefox 69, the `sx` parameter was required; you may now call `skewX()` with no inputs. A value of 0 is correctly assumed.	48	11	61	33 Before Firefox for Android 79, the `sx` parameter was required; you may now call `skewX()` with no inputs. A value of 0 is correctly assumed.	45	11	8.0	61	11
`skewY`	61	79	33 Before Firefox 69, the `sy` parameter was required; you may now call `skewY()` with no inputs. A value of 0 is correctly assumed.	48	11	61	33 Before Firefox for Android 79, the `sy` parameter was required; you may now call `skewY()` with no inputs. A value of 0 is correctly assumed.	45	11	8.0	61	11
`toFloat32Array`	61	79	33	48	11	61	33	45	11	8.0	61	11
`toFloat64Array`	61	79	33	48	11	61	33	45	11	8.0	61	11
`toJSON`	61	79	62	48	11	61	62	45	11	8.0	61	11
`toString`	61	79	33	48	11	61	33	45	11	8.0	61	11
`transformPoint`	61	79	33	48	11	61	33	45	11	8.0	61	11
`translate`	61	79	33	48	11	61	33	45	11	8.0	61	11
`worker_support`	61	79	69	48	11	61	79	45	11	8.0	61	11