MDN wants to learn about developers like you: https://qsurvey.mozilla.com/s3/MDN-dev-survey

# translateX()

The `translateX()` CSS function moves the element horizontally on the plane. This transformation is characterized by a `<length>` defining how much it moves horizontally.

`translateX(tx)` is a shortcut for `translate(tx, 0)`.

## Syntax

```translateX(t)
```

## Values

t
Is a `<length>` representing the abscissa of the translating vector.
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& t\\ 01& 0\\ 0& 0& 1\end{array}\right)$ $\left(\begin{array}{cc}10& t\\ 01& 0\\ 0& 0& 1\end{array}\right)$ $\left(\begin{array}{ccc}10& 0& t\\ 01& 0& 0\\ 0& 0& 1& 0\\ 0& 0& 0& 1\end{array}\right)$
`[1 0 0 1 t 0]`

## Examples

### HTML

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

### CSS

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

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

## Document Tags and Contributors

Tags:
Contributors to this page: chrisdavidmills, Sheppy, SphinxKnight, xjlin, Sebastianz, mrstork, jsx, teoli
Last updated by: chrisdavidmills,