Web/API/DOMMatrixReadOnly/translate

This is an experimental technologyCheck the Browser compatibility table carefully before using this in production.

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

Syntax

The translate() method accepts two or three values.

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:

<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.

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

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

Screenshot	Live sample
[[File:../../../../../../media.prod.mdn.mozit.cloud/attachments/2019/02/19/16525/51975397b6aa0bc32fbe943f22fbdd1b/Screen_Shot_2019-02-19_at_11.20.40.png|class=internal]]

Specifications

Specification	Status	Comment
Geometry Interfaces Module Level 1The definition of 'DOMMatrixReadOnly.translate()' in that specification.	Candidate Recommendation	Initial definition

Browser compatibility

The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request.

Update compatibility data on GitHub

	Desktop						Mobile
	Chrome	Edge	Firefox	Internet Explorer	Opera	Safari	Android webview	Chrome for Android	Firefox for Android	Opera for Android	Safari on iOS	Samsung Internet
translate()	Chrome Full support 61	Edge Full support 79	Firefox Full support 33	IE No support No	Opera Full support 48	Safari Full support 11	WebView Android Full support 61	Chrome Android Full support 61	Firefox Android Full support 33	Opera Android Full support 45	Safari iOS Full support 11	Samsung Internet Android Full support 8.0

Legend

Full support  

Full support

No support  

No support

DOMMatrixReadOnly.translate() by Mozilla Contributors is licensed under CC-BY-SA 2.5.