The translateY() function moves an element along the vertical Y-axis.


transform: translateY(<value>);

The required <value> can be one of the following:

  • Length value: 100px, 1.5em
  • Percentage value: 25%, 50%

A positive value moves the element down the vertical Y-axis, while a negative value will move an element up.

Example 1

In the example below, a .box element is moved down the Y-axis by 100px:

.box {
transform: translateY(100px);

Example 2

In this example, the element is moved up the Y-axis by -10em, relative to the height of its direct parent element.

.box {
transform: translateY(-10em);


Interested in helping build Docs? Read the Contribution Guide or share your thoughts in this feedback form.

Learn CSS on Codecademy