Published Feb 27, 2022
Contribute to Docs

The translateX() function moves an element along the horizontal X-axis.


transform: translateX(<value>);

The required <value> can be one of the following:

  • Length value: 100px, 1.5em
  • Percentage value: 25%, 50%

A positive value moves an element towards the right along the horizontal X-axis, while a negative value will move an element left.

Note: translateX(<value>) is functionally equivalent to translate(<value>) when translate is called with a single value.

Example 1

In the example below, an element with a .box class is moved 100px to the right:

.box {
transform: translateX(100px);

Example 2

In this example, the element is moved to the left by -10em, relative to the width of its direct parent:

.box {
transform: translateX(-10em);

All contributors

Looking to contribute?

Learn CSS on Codecademy