CSS translateX()

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

Syntax

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);
}

Copy to clipboard
Copy to clipboard

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);
}

Copy to clipboard
Copy to clipboard