DOMPointReadOnly: matrixTransform() method
Baseline
Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2020.
Note: This feature is available in Web Workers.
The matrixTransform() method of the DOMPointReadOnly interface applies a matrix transform specified as an object to the DOMPointReadOnly object, creating and returning a new DOMPointReadOnly object. Neither the matrix nor the point are altered.
If the matrix passed as a parameter is 2D (the is2D is true) then this is a 2D transformation and the point's z coordinate will be 0 and point's w perspective will be 1. Otherwise this is a 3D transformation.
You can also create a new DOMPoint with a point and matrix with the DOMMatrixReadOnly.transformPoint() method.
Syntax
matrixTransform()
matrixTransform(matrix)
Parameters
matrix-
A
DOMMatrixorDOMMatrixReadOnlyobject.
Return value
A new DOMPoint object.
Examples
2D transform
In this example, we apply a 2D matrix transform to a DOMPointReadOnly, creating a new DOMPoint:
const originalPoint = new DOMPointReadOnly(10, 20); // DOMPointReadOnly {x: 10, y: 20, z: 0, w: 1}
const matrix = new DOMMatrix([1, 0, 0, 1, 15, 30]);
const transformedPoint = originalPoint.matrixTransform(matrix); // DOMPoint {x: 25, y: 50, z: 0, w: 1}
console.log(transformedPoint.toJSON()); // output: {x: 25, y: 50, z: 0, w: 1}
3D transform
In this example, we apply a 3D matrix transform to a DOMPointReadOnly:
const point = new DOMPointReadOnly(5, 10); // DOMPointReadOnly {x: 5, y: 10, z: 0, w: 1}
const matrix3D = new DOMMatrix().translate(0, 0, 10);
const transformedPoint = point.matrixTransform(matrix3D); // DOMPoint {x: 5, y: 10, z: 10, w: 1}
Specifications
| Specification |
|---|
| Geometry Interfaces Module Level 1 # dom-dompointreadonly-matrixtransform |
Browser compatibility
| desktop | mobile | |||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|
matrixTransform()
|
|
|
|
|
|
|
|
|
|
|
|
|
Legend
Tip: you can click/tap on a cell for more information.
- Full support
- Full support
See also
DOMPointDOMMatrixDOMMatrixReadOnly.transformPoint()- CSS
matrix()andmatrix3d()functions