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

---

Repositions an element in a vertical direction.

{ transform: translateY( length ) }

y-length

Required. Floating point number representing the vertical coordinate.

The translateY( ) CSS function defines a transformation that repositions an element in the vertical direction.

The coordinate defines how much the element moves.

A value of 0 leaves the input unchanged.

If positive, the movement will be downwards. If negative, the movement will be upwards.

A percentage for vertical translations is relative to the height of the reference box.

The following example demonstrates the effects of applying the translateY( ) 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( ), translateX( )