DOMMatrix: translateSelf() method
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 translateSelf() method of the DOMMatrix interface is a mutable transformation method that modifies a matrix. It applies the specified vectors and returns the updated matrix. The default vector is [0, 0, 0].
To translate a matrix without mutating it, see DOMMatrixReadOnly.translate()
Syntax
translateSelf(translateX, translateY)
translateSelf(translateX, translateY, translateZ)
Parameters
translateX-
A number representing the abscissa (x-coordinate) of the translating vector.
translateY-
A number representing the ordinate (y-coordinate) of the translating vector.
translateZOptional-
A number representing the z component of the translating vector. If not supplied, this defaults to 0. If this is anything other than 0, the resulting matrix will be 3D.
Return value
Returns itself; the DOMMatrix translated by the given
vector.
Examples
const matrix = new DOMMatrix(); // create a matrix
console.log(matrix.toString()); // output: "matrix(1, 0, 0, 1, 0, 0)"
matrix.translateSelf(25, 25); // mutate it
console.log(matrix); // output: "matrix(1, 0, 0, 1, 25, 25)"
Specifications
| Specification |
|---|
| Geometry Interfaces Module Level 1 # dom-dommatrix-translateself |
Browser compatibility
Loading…
See also
DOMMatrixReadOnly.translate()- CSS
transformproperty - CSS
translateproperty - CSS
<transform-function>functions - CSS transforms module
- SVG
transformattribute CanvasRenderingContext2Dinterface methods