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

---

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

{ transform: translate( length ) }

x-length	Required. Floating point number representing the horizontal coordinate.
x-length, y-length	Optional. Floating point number representing the horizontal and vertical coordinates.

The translate( ) CSS function defines a transformation that repositions an element in the horizontal and/or vertical directions.

This transformation is characterized by a two-dimensional vector [tx, ty]. Its coordinates define how much the element moves in each direction.

A single value denotes the x-coordinate, while a double value denotes the x,y coordinates.

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. A percentage for vertical translations is relative to the height of the reference box.

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

 Show me 

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

translateX( ), translateY( )