DOMMatrixReadOnly

このロケールの翻訳が存在しないため、英語バージョンのコンテンツを表示しています。 Help us translate this article!

The DOMMatrixReadOnly interface represents a read-only 4x4 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 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 properties.

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.
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 is 0 except those on the main diagonal from top-left to bottom-right corner (in other words, where the offsets in each direction are equal).
m11m12m13m14m21m22m23m24m31m32m33m34m41m42m43m44
Double-precision floating-point values representing each component of a 4x4 matrix, where m11 through m14 are the first column, m21 through m24 are the second column, and so forth.
abcdef

Double-precision floating-point values representing the components of a 4x4 matrix which are required in order to perform 2D rotations and translations. These are aliases for specific components of a 4x4 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 these 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. If the matrix cannot be inverted, the new matrix's components are all set to NaN and its is2D property is set to false. 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 is 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. 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 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()
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 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 single-precision floating-point numbers in column-major (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 double-precision floating-point numbers in column-major (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. For a 2D matrix, the elements a through f are listed, for a total of six values and the form matrix(a, b, c, d, e, f). See the matrix() CSS function for details on this syntax.

For a 3D matrix, the returned string contains all 16 elements and takes the form matrix3d(m11, m12, m13, m14, m21, m22, m23, m24, m31, m32, m33, m34, m41, m42, m43, m44). See the CSS matrix3d() function for details on the 3D notation's syntax.

Throws an InvalidStateError exception if any of the elements in the matrix are non-finite (even if, in the case of a 2D matrix, the non-finite 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 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 a DOMMatrixInit dictionary 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 Status Comment
Geometry Interfaces Module Level 1
The definition of 'DOMMatrixReadOnly' in that specification.
Candidate Recommendation Initial definition

Browser compatibility

Update compatibility data on GitHub
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidFirefox for AndroidOpera for AndroidSafari on iOSSamsung Internet
DOMMatrixReadOnlyChrome Full support 45Edge No support NoFirefox Full support 33IE No support NoOpera Full support 32Safari Full support 11WebView Android Full support 45Chrome Android Full support 45Firefox Android Full support 33Opera Android Full support 45Safari iOS Full support 11.3Samsung Internet Android ?
DOMMatrixReadOnly() constructorChrome Full support 57Edge No support NoFirefox Full support 33IE No support NoOpera Full support 44Safari Full support 11WebView Android Full support 57Chrome Android Full support 57Firefox Android Full support 33Opera Android Full support 45Safari iOS Full support 11.3Samsung Internet Android ?
aChrome Full support 45Edge No support NoFirefox Full support 33IE No support NoOpera Full support 32Safari Full support 11WebView Android Full support 45Chrome Android Full support 45Firefox Android Full support 33Opera Android Full support 45Safari iOS Full support 11.3Samsung Internet Android ?
bChrome Full support 45Edge No support NoFirefox Full support 33IE No support NoOpera Full support 32Safari Full support 11WebView Android Full support 45Chrome Android Full support 45Firefox Android Full support 33Opera Android Full support 45Safari iOS Full support 11.3Samsung Internet Android ?
cChrome Full support 45Edge No support NoFirefox Full support 33IE No support NoOpera Full support 32Safari Full support 11WebView Android Full support 45Chrome Android Full support 45Firefox Android Full support 33Opera Android Full support 45Safari iOS Full support 11.3Samsung Internet Android ?
dChrome Full support 45Edge No support NoFirefox Full support 33IE No support NoOpera Full support 32Safari Full support 11WebView Android Full support 45Chrome Android Full support 45Firefox Android Full support 33Opera Android Full support 45Safari iOS Full support 11.3Samsung Internet Android ?
eChrome Full support 45Edge No support NoFirefox Full support 33IE No support NoOpera Full support 32Safari Full support 11WebView Android Full support 45Chrome Android Full support 45Firefox Android Full support 33Opera Android Full support 45Safari iOS Full support 11.3Samsung Internet Android ?
fChrome Full support 45Edge No support NoFirefox Full support 33IE No support NoOpera Full support 32Safari Full support 11WebView Android Full support 45Chrome Android Full support 45Firefox Android Full support 33Opera Android Full support 45Safari iOS Full support 11.3Samsung Internet Android ?
flipXChrome Full support 54Edge No support NoFirefox Full support 33IE No support NoOpera Full support 41Safari Full support 11WebView Android Full support 54Chrome Android Full support 54Firefox Android Full support 33Opera Android Full support 45Safari iOS Full support 11.3Samsung Internet Android ?
flipYChrome Full support 54Edge No support NoFirefox Full support 33IE No support NoOpera Full support 41Safari Full support 11WebView Android Full support 54Chrome Android Full support 54Firefox Android Full support 33Opera Android Full support 45Safari iOS Full support 11.3Samsung Internet Android ?
inverseChrome Full support 55Edge No support NoFirefox Full support 33IE No support NoOpera Full support 42Safari Full support 11WebView Android Full support 55Chrome Android Full support 55Firefox Android Full support 33Opera Android Full support 45Safari iOS Full support 11.3Samsung Internet Android ?
is2DChrome Full support 45Edge No support NoFirefox Full support 33IE No support NoOpera Full support 32Safari Full support 11WebView Android Full support 45Chrome Android Full support 45Firefox Android Full support 33Opera Android Full support 45Safari iOS Full support 11.3Samsung Internet Android ?
isIdentityChrome Full support 45Edge No support NoFirefox Full support 33IE No support NoOpera Full support 32Safari Full support 11WebView Android Full support 45Chrome Android Full support 45Firefox Android Full support 33Opera Android Full support 45Safari iOS Full support 11.3Samsung Internet Android ?
m11Chrome Full support 45Edge No support NoFirefox Full support 33IE No support NoOpera Full support 32Safari Full support 11WebView Android Full support 45Chrome Android Full support 45Firefox Android Full support 33Opera Android Full support 45Safari iOS Full support 11.3Samsung Internet Android ?
m12Chrome Full support 45Edge No support NoFirefox Full support 33IE No support NoOpera Full support 32Safari Full support 11WebView Android Full support 45Chrome Android Full support 45Firefox Android Full support 33Opera Android Full support 45Safari iOS Full support 11.3Samsung Internet Android ?
m13Chrome Full support 45Edge No support NoFirefox Full support 33IE No support NoOpera Full support 32Safari Full support 11WebView Android Full support 45Chrome Android Full support 45Firefox Android Full support 33Opera Android Full support 45Safari iOS Full support 11.3Samsung Internet Android ?
m14Chrome Full support 45Edge No support NoFirefox Full support 33IE No support NoOpera Full support 32Safari Full support 11WebView Android Full support 45Chrome Android Full support 45Firefox Android Full support 33Opera Android Full support 45Safari iOS Full support 11.3Samsung Internet Android ?
m21Chrome Full support 45Edge No support NoFirefox Full support 33IE No support NoOpera Full support 32Safari Full support 11WebView Android Full support 45Chrome Android Full support 45Firefox Android Full support 33Opera Android Full support 45Safari iOS Full support 11.3Samsung Internet Android ?
m22Chrome Full support 45Edge No support NoFirefox Full support 33IE No support NoOpera Full support 32Safari Full support 11WebView Android Full support 45Chrome Android Full support 45Firefox Android Full support 33Opera Android Full support 45Safari iOS Full support 11.3Samsung Internet Android ?
m23Chrome Full support 45Edge No support NoFirefox Full support 33IE No support NoOpera Full support 32Safari Full support 11WebView Android Full support 45Chrome Android Full support 45Firefox Android Full support 33Opera Android Full support 45Safari iOS Full support 11.3Samsung Internet Android ?
m24Chrome Full support 45Edge No support NoFirefox Full support 33IE No support NoOpera Full support 32Safari Full support 11WebView Android Full support 45Chrome Android Full support 45Firefox Android Full support 33Opera Android Full support 45Safari iOS Full support 11.3Samsung Internet Android ?
m31Chrome Full support 45Edge No support NoFirefox Full support 33IE No support NoOpera Full support 32Safari Full support 11WebView Android Full support 45Chrome Android Full support 45Firefox Android Full support 33Opera Android Full support 45Safari iOS Full support 11.3Samsung Internet Android ?
m32Chrome Full support 45Edge No support NoFirefox Full support 33IE No support NoOpera Full support 32Safari Full support 11WebView Android Full support 45Chrome Android Full support 45Firefox Android Full support 33Opera Android Full support 45Safari iOS Full support 11.3Samsung Internet Android ?
m33Chrome Full support 45Edge No support NoFirefox Full support 33IE No support NoOpera Full support 32Safari Full support 11WebView Android Full support 45Chrome Android Full support 45Firefox Android Full support 33Opera Android Full support 45Safari iOS Full support 11.3Samsung Internet Android ?
m34Chrome Full support 45Edge No support NoFirefox Full support 33IE No support NoOpera Full support 32Safari Full support 11WebView Android Full support 45Chrome Android Full support 45Firefox Android Full support 33Opera Android Full support 45Safari iOS Full support 11.3Samsung Internet Android ?
m41Chrome Full support 61Edge No support NoFirefox Full support 33IE No support NoOpera Full support 48Safari Full support 11WebView Android Full support 61Chrome Android Full support 61Firefox Android Full support 33Opera Android Full support 45Safari iOS Full support 11.3Samsung Internet Android ?
m42Chrome Full support 61Edge No support NoFirefox Full support 33IE No support NoOpera Full support 48Safari Full support 11WebView Android Full support 61Chrome Android Full support 61Firefox Android Full support 33Opera Android Full support 45Safari iOS Full support 11.3Samsung Internet Android ?
m43Chrome Full support 61Edge No support NoFirefox Full support 33IE No support NoOpera Full support 48Safari Full support 11WebView Android Full support 61Chrome Android Full support 61Firefox Android Full support 33Opera Android Full support 45Safari iOS Full support 11.3Samsung Internet Android ?
m44Chrome Full support 61Edge No support NoFirefox Full support 33IE No support NoOpera Full support 48Safari Full support 11WebView Android Full support 61Chrome Android Full support 61Firefox Android Full support 33Opera Android Full support 45Safari iOS Full support 11.3Samsung Internet Android ?
multiplyChrome Full support 45Edge No support NoFirefox Full support 33IE No support NoOpera Full support 32Safari Full support 11WebView Android Full support 45Chrome Android Full support 45Firefox Android Full support 33Opera Android Full support 45Safari iOS Full support 11.3Samsung Internet Android ?
rotateChrome Full support 56Edge No support NoFirefox Full support 33IE No support NoOpera Full support 43Safari Full support 11WebView Android Full support 56Chrome Android Full support 56Firefox Android Full support 33Opera Android Full support 45Safari iOS Full support 11.3Samsung Internet Android ?
rotateAxisAngleChrome Full support 56Edge No support NoFirefox Full support 33IE No support NoOpera Full support 43Safari Full support 11WebView Android Full support 56Chrome Android Full support 56Firefox Android Full support 33Opera Android Full support 45Safari iOS Full support 11.3Samsung Internet Android ?
rotateFromVectorChrome Full support 56Edge No support NoFirefox Full support 33IE No support NoOpera Full support 43Safari Full support 11WebView Android Full support 56Chrome Android Full support 56Firefox Android Full support 33Opera Android Full support 45Safari iOS Full support 11.3Samsung Internet Android ?
scaleChrome Full support 45Edge No support NoFirefox Partial support 33
Notes
Partial support 33
Notes
Notes Firefox currently still supports the older three-parameter syntax - DOMMatrix.scale(scaleX[, originX][, originY]) - not the six-parameter version.
IE No support NoOpera Full support 32Safari Full support 11WebView Android Full support 45Chrome Android Full support 45Firefox Android Partial support 33
Notes
Partial support 33
Notes
Notes Firefox currently still supports the older three-parameter syntax - DOMMatrix.scale(scaleX[, originX][, originY]) - not the six-parameter version.
Opera Android Full support 45Safari iOS Full support 11.3Samsung Internet Android ?
scale3dChrome Full support 45Edge No support NoFirefox Full support 33IE No support NoOpera Full support 32Safari Full support 11WebView Android Full support 45Chrome Android Full support 45Firefox Android Full support 33Opera Android Full support 45Safari iOS Full support 11.3Samsung Internet Android ?
scaleNonUniformChrome No support 45 — 56Edge No support NoFirefox Full support 33IE No support NoOpera No support 32 — 43Safari No support NoWebView Android No support 45 — 56Chrome Android No support 45 — 56Firefox Android Full support 33Opera Android Full support 45Safari iOS No support NoSamsung Internet Android ?
skewXChrome Full support 54Edge No support NoFirefox Full support 33IE No support NoOpera Full support 41Safari Full support 11WebView Android Full support 54Chrome Android Full support 54Firefox Android Full support 33Opera Android Full support 45Safari iOS Full support 11.3Samsung Internet Android ?
skewYChrome Full support 54Edge No support NoFirefox Full support 33IE No support NoOpera Full support 41Safari Full support 11WebView Android Full support 54Chrome Android Full support 54Firefox Android Full support 33Opera Android Full support 45Safari iOS Full support 11.3Samsung Internet Android ?
toFloat32ArrayChrome Full support 45Edge No support NoFirefox Full support 33IE No support NoOpera Full support 32Safari Full support 11WebView Android Full support 45Chrome Android Full support 45Firefox Android Full support 33Opera Android Full support 45Safari iOS Full support 11.3Samsung Internet Android ?
toFloat64ArrayChrome Full support 45Edge No support NoFirefox Full support 33IE No support NoOpera Full support 32Safari Full support 11WebView Android Full support 45Chrome Android Full support 45Firefox Android Full support 33Opera Android Full support 45Safari iOS Full support 11.3Samsung Internet Android ?
toJSONChrome Full support 56Edge No support NoFirefox Full support 33IE No support NoOpera Full support 43Safari Full support 11WebView Android Full support 56Chrome Android Full support 56Firefox Android Full support 33Opera Android Full support 45Safari iOS Full support 11.3Samsung Internet Android ?
toStringChrome Full support 54Edge No support NoFirefox Full support 33IE No support NoOpera Full support 41Safari Full support 11WebView Android Full support 54Chrome Android Full support 54Firefox Android Full support 33Opera Android Full support 45Safari iOS Full support 11.3Samsung Internet Android ?
transformChrome Full support 61Edge No support NoFirefox Full support 33IE No support NoOpera Full support 48Safari Full support 11WebView Android Full support 61Chrome Android Full support 61Firefox Android Full support 33Opera Android Full support 45Safari iOS Full support 11.3Samsung Internet Android ?
transformPointChrome Full support 56Edge No support NoFirefox Full support 33IE No support NoOpera Full support 43Safari Full support 11WebView Android Full support 56Chrome Android Full support 56Firefox Android Full support 33Opera Android Full support 45Safari iOS Full support 11.3Samsung Internet Android ?
translateChrome Full support 45Edge No support NoFirefox Full support 33IE No support NoOpera Full support 32Safari Full support 11WebView Android Full support 45Chrome Android Full support 45Firefox Android Full support 33Opera Android Full support 45Safari iOS Full support 11.3Samsung Internet Android ?
Available in workersChrome Full support 57Edge No support NoFirefox No support NoIE No support NoOpera Full support 44Safari Full support 11WebView Android Full support 57Chrome Android Full support 57Firefox Android No support NoOpera Android Full support 45Safari iOS Full support 11.3Samsung Internet Android ?

Legend

Full support  
Full support
Partial support  
Partial support
No support  
No support
Compatibility unknown  
Compatibility unknown
See implementation notes.
See implementation notes.

See also