translateY() CSS Function
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 fromdisplay: none;
todisplay: 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.
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 | |||||
![]() |
![]() |
![]() |
![]() |
![]() |
|
12 | 1 | 3.5 | 10.5 | 3.1 |
Tablets / Mobile | |||||
![]() |
![]() |
![]() |
![]() |
![]() |
![]() |
18 | 4 | 11 | 3.2 | 1 | 2 |
Last updated by CSSPortal on: 7th October 2023