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

DOMMatrix.translateSelf(translateX, translateY)
DOMMatrix.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.
translateZ Optional: 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

BCD tables only load in the browser