CSS translateY()

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

Syntax

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);
}

Copy to clipboard
Copy to clipboard

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);
}

Copy to clipboard
Copy to clipboard