The DOMMatrix
constructor creates a new DOMMatrix
object which represents 4x4 matrices, suitable for 2D and 3D operations.
The DOMMatrix
constructor creates a new DOMMatrix
object which represents 4x4 matrices, suitable for 2D and 3D operations.
js
new DOMMatrix() new DOMMatrix(init)
init
Optional
An array of numbers specifying the matrix you want to create, or a CSS transform string.
In case an array of numbers is passed, the behavior depends on the length of the array:
[a, b, c, d, e, f]
, a 2D matrix is created, initialized with the provided components.[m11, m12, m13, …, m42, m43, m44]
, a 3D matrix is created, initialized with the provided components. This example creates a DOMMatrix to use as an argument for calling Point.matrixTransform()
.
js
const point = new DOMPoint(5, 4); const scaleX = 2; const scaleY = 3; const translateX = 12; const translateY = 8; const angle = Math.PI / 2; const matrix = new DOMMatrix([ Math.cos(angle) * scaleX, Math.sin(angle) * scaleX, -Math.sin(angle) * scaleY, Math.cos(angle) * scaleY, translateX, translateY, ]); const transformedPoint = point.matrixTransform(matrix);
Desktop | Mobile | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | WebView Android | Chrome Android | Firefox for Android | Opera Android | Safari on IOS | Samsung Internet | |
DOMMatrix |
6152 | 79121212–79 | 49331.5 | 11109 | 4815≤12.1 | 1154 | 614.44.4 | 611818 | 49334 | 4814≤12.1 | 1143 | 8.01.01.0 |
© 2005–2023 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/API/DOMMatrix/DOMMatrix