CSS transform: translateY()

The CSS translateY() function is used to define the transform property to move an element up/down on y-axis. The figure given below, shows how the translation of an element on y-axis performs:

For example:

HTML with CSS Code

<!DOCTYPE html>
<html>
<head>
   <style>
      div{width: 120px; height: 60px; background: peru; margin: auto;}
      .b{transform: translateY(20px);}
      .c{transform: translateY(-20px);}
      .d{transform: translateY(40px);}
   </style>
</head>
<body>
   
   <h2>Without transform: translateY()</h2>
   <div class="a"></div>

   <h2>transform: translateY(20px)</h2>
   <div class="b"></div>

   <h2>transform: translateY(-20px)</h2>
   <div class="c"></div>

   <h2>transform: translateY(40px)</h2>
   <div class="d"></div>
   
</body>
</html>

Output

Without transform: translateY()

transform: translateY(20px)

transform: translateY(-20px)

transform: translateY(40px)

CSS translateY() Syntax

The syntax of translateY() function in CSS, is:

transform: translateY(length)

Note - Length units that can be used in CSS, are defined in its separate tutorial.

The following figure shows two 3D boxes (Dice). The first one is a normal die, whereas I've applied the transform: translateY(40px) to the front face (the face with value 1) of the second die.

CSS Online Test

« Previous Tutorial Next Tutorial »