translateY() CSS Function

If this site has been useful, we’d love your support! Consider buying us a coffee to keep things going strong!

Description

The translateY() CSS function is a 2D transformation function that moves an element along the vertical axis. Unlike the translate() function, which can move an element in both X and Y directions, translateY() focuses solely on the Y-axis, shifting the element up or down relative to its current position without affecting the layout of surrounding elements. This movement is relative to the element’s current position in the document flow and does not change the space the element originally occupies, making it a non-disruptive transformation.

The function accepts values in various units such as pixels (px), percentages (%), em, rem, or viewport units. Positive values move the element downward, while negative values move it upward. For example, translateY(50px) moves the element 50 pixels down from its original position.

Using translateY() in combination with transition can create smooth animations. For instance, you can make a div slide in from above on hover:

div {
  transform: translateY(-100%);
  transition: transform 0.5s ease-in-out;
}

div:hover {
  transform: translateY(0);
}

This example demonstrates how the element initially sits above its normal position and smoothly slides down into view when hovered. Because translateY() does not impact the document flow, adjacent elements remain unaffected, unlike when using top or margin adjustments.

translateY() is widely used for UI animations such as tooltips, modals, dropdowns, and interactive hover effects, providing a performance-friendly alternative to positional shifts.

Syntax

transform: translate(ty);

Values

tyVertical shift. A positive value moves up, a negative value down.

Any length units accepted in CSS are accepted as values - for example, pixels (px), inches (in), points (pt), etc. A positive value shifts down, a negative one up. A value of 0 does not change the position of the element.

Example

HTML

<div class="container">

  <div class="moving-box">

    Hover over me!

  </div>

</div>

CSS

/* The area where the box lives */

.container {

  width: 100%;

  height: 300px;

  border: 2px dashed #ccc;

  display: flex;

  justify-content: center;

  align-items: flex-start; /* Start at the top */

  padding-top: 20px;

}



/* The element we are moving */

.moving-box {

  width: 150px;

  height: 100px;

  background-color: #3498db;

  color: white;

  display: flex;

  align-items: center;

  justify-content: center;

  border-radius: 8px;

  font-family: sans-serif;

  

  /* Smoothly animate the transform property over 0.5 seconds */

  transition: transform 0.5s ease-in-out;

}



/* When the container is hovered, move the box */

.container:hover .moving-box {

  /* Positive value moves it DOWN 100 pixels */

  transform: translateY(100px);

  background-color: #2ecc71;

}

Result

Editor

Browser Support

The following information will show you the current browser support for the CSS translateY() function. Hover over a browser icon to see the version that first introduced support for this CSS function.