CSS translateY() Function

Definition and Usage

CSS translateY() function allows you to reposition elements along the y-axis (vertically).

translateY() function in transform used in the property.

Example

Reposition different <div> elements vertically:

#myDiv1 {
  transform: translateY(30px); /* Moves the element 30px along the y-axis */
}
#myDiv2 {
  transform: translateY(50px); /* Moves the element 50px along the y-axis */
}
#myDiv3 {
  transform: translateY(-10px); /* Moves the element -10px along the y-axis */
}

Try It Yourself

CSS Syntax

translateY(y)
Value Description
y Required. Defines the distance of the element's movement along the y-axis, which can be a number or a percentage.

Technical Details

Version: CSS Transforms Module Level 1

Browser Support

The numbers in the table represent the first browser version to fully support this function.

Chrome Edge Firefox Safari Opera
1 12 3.5 3.1 10.5

Related Pages

Tutorial:CSS 2D Transformation

Referenz:CSS transform Eigenschaft

Referenz:CSS translate() Funktion

Referenz:CSS translateX() Funktion

Referenz:HTML DOM transform Eigenschaft