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.

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>
Advertisements