---
title: DOMMatrixReadOnly.translate()
slug: Web/API/DOMMatrixReadOnly/translate
tags:
  - API
  - DOMMatrix
  - DOMMatrixReadOnly
  - Experimental
  - Geometry
  - Geometry Interfaces
  - Interface
  - Method
  - Reference
  - Translate
  - matrix
browser-compat: api.DOMMatrixReadOnly.translate
---
{{APIRef("Geometry Interfaces")}}{{SeeCompatTable}}

The `translate()` method of the {{domxref("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.

```js
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_inline}}
  - : 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`](/en-US/docs/Web/API/DOMMatrix "The DOMMatrix interface represents 4x4 matrices, suitable for 2D and 3D operations.")
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());
```

{{ EmbedLiveSample('Examples', '250', '250',
  'screen_shot_2019-02-19_at_11.20.40.png',
  'Web/API/DOMMatrixReadOnly/translate') }}

## Specifications

{{Specifications}}

## Browser compatibility

{{Compat}}
