# translateX function

The `translateX` function sets an element reposition along the X-axis. It is used together with the `transform` property. The property value is any size units. A positive value shifts to the right, a negative value shifts to the left.

## Syntax

`selector { transform: translateX(reposition); }`

## Example

If you hover over the block, it will move `30px` to the right:

`<div id="elem"></div>` `#elem { border: 1px solid black; width: 100px; height: 50px; } #elem:hover { transform: translateX(30px); }`

:

## Example

If you hover over the block, it will move `30px` to the left:

`<div id="elem"></div>` `#elem { border: 1px solid black; width: 100px; height: 50px; } #elem:hover { transform: translateX(-30px); }`

:

## See also

- the `translate` function
  that specifies a reposition along the X- and Y-axes
- the `translateY` function
  that specifies a reposition along the Y-axis

← →
↑
en ru