CSS - translate()

The `translate()` CSS function moves the position of the element on the plane. This transformation is characterized by a vector whose coordinates define how much it moves in each direction.

Examples

Using a single axis translation

HTML

```<p>foo</p>
<p class="transformed">bar</p>
<p>foo</p>```

CSS

```p {
width: 50px;
height: 50px;
background-color: teal;
}

.transformed {
transform: translate(10px);
/* equivalent to translateX(10px)*/
background-color: blue;
}
```

Combining y-axis and x-axis translation

HTML

```<p>foo</p>
<p class="transformed">bar</p>
<p>foo</p>```

CSS

```p {
width: 50px;
height: 50px;
background-color: teal;
}

.transformed {
transform: translate(10px,10px);
background-color: blue;
}
```

Syntax

```translate(tx)       or
translate(tx, ty)
```

Description

The `translate()` CSS function moves the position of the element on the plane. This transformation is characterized by a vector whose coordinates define how much it moves in each direction.

tx
Is a `<length>` representing the abscissa of the translating vector.
ty
Is a `<length>` representing the ordinate of the translating vector. If unspecified, it will equal `0` :  `translate(2)` means `translate(2, 0)`.
Cartesian coordinates on ℝ2 Homogeneous coordinates on ℝℙ2 Cartesian coordinates on ℝ3 Homogeneous coordinates on ℝℙ3

A translation is not a linear transform in ℝ2 and cannot be represented using a matrix in the cartesian coordinates system.

$\left(\begin{array}{cc}10& tx\\ 01& ty\\ 0& 0& 1\end{array}\right)$ $\left(\begin{array}{cc}10& tx\\ 01& ty\\ 0& 0& 1\end{array}\right)$ $\left(\begin{array}{ccc}10& 0& tx\\ 01& 0& ty\\ 0& 0& 1& 0\\ 0& 0& 0& 1\end{array}\right)$
`[1 0 0 1 tx ty]`