CSS Function - translateY()
The translateY() function in CSS is used to translate, or move, an element vertically along the Y-axis. It's one of the transformation functions in CSS that allows you to modify the position and appearance of elements on a web page. The result is a <transform-function> datatype.
The translateY() function is often used in conjunction with other CSS transformation functions like translateX() (for horizontal movement), scale() (for scaling), and rotate() (for rotation) to create more complex transformations and animations on web elements.
Possible values
The function translateY() can take only one parameter. It specifies the distance by which the element should be moved vertically. Positive values move the element downwards, while negative values move it upwards.
<length-percentage>: Can be a <length> or <percentage> value that represents the vertical, y-component of the translating vector [0,ty].
Syntax
transform: translateY(100px) | translateY(45%);
CSS translateY() - Length Value
Following is an example of translateY() function with a length value as parameter:
<html> <head> <style> div { height: 100px; width: 100px; border: 2px solid black; background-color: aquamarine; margin-bottom: 5px; } .translate-y-length { transform: translateY(100px); background-color: tomato; } </style> </head> <body> <div>No translateY() applied</div> <div class="translate-y-length">translateY(100px) applied</div> </body> </html>
CSS translateY() - Percentage Value
Following is an example of translateX() function with a percentage value as parameter:
<html> <head> <style> div { height: 110px; width: 110px; border: 2px solid black; background-color: aquamarine; margin-bottom: 5px; } .translate-y-percent { transform: translateY(30%); background-color: tomato; } </style> </head> <body> <div>No translateY() applied</div> <div class="translate-y-percent">translateY(30%) applied</div> </body> </html>
CSS translateY() - Negative Percentage Value
Following is an example of translateY() function with a negative percentage value as parameter:
<html> <head> <style> div { height: 110px; width: 110px; border: 2px solid black; background-color: aquamarine; margin-bottom: 5px; } .translate-y-percent { transform: translateY(-20%); background-color: tomato; } </style> </head> <body> <div>No translateY() applied</div> <div class="translate-y-percent">translateY(-20%) applied</div> </body> </html>
CSS translateY() - Negative Length Value
Following is an example of translateY() function with a negative length value as parameter:
<html> <head> <style> div { height: 115px; width: 115px; border: 2px solid black; background-color: aquamarine; margin-bottom: 5px; } .translate-y-length { transform: translateY(-10px); background-color: tomato; } </style> </head> <body> <div>No translateY() applied</div> <div class="translate-y-length">translateY(-10px) applied</div> </body> </html>
To Continue Learning Please Login
Login with Google