translateY() CSS Function

If this site has been useful, we’d love your support! Running this site takes time and resources, and every small contribution helps us keep creating valuable content. Consider buying us a coffee to keep things going strong!

Description

The CSS translateY() function is a 2D transform function used to translate an element along the y-axis (vertically). It takes a translation value ty as an argument. This value specifies the amount by which an element is to be translated. The translation value ty is provided either as a <length> or as a percentage.

To use the translateY() function, simply add it to the transform property of the element you want to translate. For example, to translate an element 100 pixels down, you would use the following CSS:

element {
  transform: translateY(100px);
}

You can also use the translateY() function to translate an element up by providing a negative value as the argument. For example, to translate an element 50 pixels up, you would use the following CSS:

element {
  transform: translateY(-50px);
}

The translateY() function is often used in conjunction with other CSS transform functions, such as translateX(), to create more complex animations and effects.

Here are some examples of how the translateY() function can be used:

  • To create a simple slide-down animation, you could use the translateY() function to move an element down from display: none; to display: block;.
  • To create a more complex animation, you could use the translateY() function to move an element back and forth along the y-axis.
  • To create a hover effect, you could use the translateY() function to move an element up or down slightly when the user hovers over it.

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

<img class="translate" src="images/nature.jpg" alt="Nature Image">
.translate {
transform: translateY(-50px);
}

Browser Support

The following table will show you the current browser support for the CSS translateY() function.

Desktop
Edge Chrome Firefox Opera Safari
1213.510.53.1
Tablets / Mobile
Chrome Firefox Opera Safari Samsung Webview
184113.212

Last updated by CSSPortal on: 7th October 2023