W3cubDocs

/Web APIs

DOMMatrixReadOnly: translate() method

The translate() method of the DOMMatrixReadOnly interface creates a new matrix being the result of the original matrix with a translation applied.

Syntax

js

DOMMatrix.translate(translateX, translateY)
DOMMatrix.translate(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 a DOMMatrix containing a new matrix being the result of the matrix being translated by the given vector. The original matrix is not modified.

If a translation is applied about the z-axis, the resulting matrix will be a 4x4 3D matrix.

Examples

This SVG contains two squares, one red and one blue, each positioned at the document origin:

html

<svg width="250" height="250" viewBox="0 0 50 50">
  <rect width="25" height="25" fill="red" />
  <rect id="transformed" width="25" height="25" fill="blue" />
</svg>

The following JavaScript first creates an identity matrix, then uses the translate() method to create a new, translated matrix — which is then applied to the blue square as a transform. The red square is left in place.

js

const matrix = new DOMMatrixReadOnly().translate(25, 25);

document
  .querySelector("#transformed")
  .setAttribute("transform", matrix.toString());

Specifications

Browser compatibility

Desktop Mobile
Chrome Edge Firefox Internet Explorer Opera Safari WebView Android Chrome Android Firefox for Android Opera Android Safari on IOS Samsung Internet
translate 61 79 33 No 48 11 61 61 33 45 11 8.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/DOMMatrixReadOnly/translate