Baseline Widely available
Note: This feature is available in Web Workers.
The DOMMatrix
constructor creates a new DOMMatrix
object which represents 4x4 matrices, suitable for 2D and 3D operations.
new DOMMatrix()
new DOMMatrix(init)
Parameters
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 DOMPointReadOnly.matrixTransform()
.
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);
Specifications Browser compatibility
RetroSearch is an open source project built by @garambo | Open a GitHub Issue
Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo
HTML:
3.2
| Encoding:
UTF-8
| Version:
0.7.4