Abakada: Back to Basics > Language References > CSS Properties > Transform Functions > translateX( ) Transform Function

---

Repositions an element in the horizontal and/or vertical directions.

{ transform: translateX( length ) }

x-length

Required. Floating point number representing the horizontal coordinate.

The translateX( ) CSS function defines a transformation that repositions an element in a horizontal direction.

The coordinate defines how much the element moves.

A value of 0 leaves the input unchanged.

If positive, the movement will be clockwise. If negative, the movement will be counter-clockwise.

A percentage for horizontal translations is relative to the width of the reference box.

The following example demonstrates the effects of applying the translateX( ) function to change an element’s position on the 2D plane.

 Show me 

For a brief overview, please see Understanding and Using CSS Transforms.

translate( ), translateY( )