CSS transform: rotateY()

The CSS rotateY() function is used to define the transform property, to rotate an element along y-axis, in this way:

For example:

HTML with CSS Code

<!DOCTYPE html>
<html>
<head>
   <style>
      div{width: 120px; height: 60px; background: peru; margin: auto;}
      .b{transform: rotateY(12deg);}
      .c{transform: rotateY(25deg);}
      .d{transform: rotateY(45deg);}
      .e{transform: rotateY(80deg);}
      .f{transform: rotateY(90deg);}
      .g{transform: rotateY(135deg);}
      .h{transform: rotateY(180deg);}
   </style>
</head>
<body>
   
   <h2>Without rotateY()</h2>
   <div class="a"></div>

   <h2>rotateY(12deg)</h2>
   <div class="b"></div>

   <h2>rotateY(25deg)</h2>
   <div class="c"></div>

   <h2>rotateY(45deg)</h2>
   <div class="d"></div>

   <h2>rotateY(80deg)</h2>
   <div class="e"></div>

   <h2>rotateY(90deg)</h2>
   <div class="f"></div>

   <h2>rotateY(135deg)</h2>
   <div class="g"></div>

   <h2>rotateY(180deg)</h2>
   <div class="h"></div>
   
</body>
</html>

Output

Without rotateY()

rotateY(12deg)

rotateY(25deg)

rotateY(45deg)

rotateY(80deg)

rotateY(90deg)

rotateY(135deg)

rotateY(180deg)

CSS rotateY() Syntax

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

transform: rotateY(degree);

The value of degree parameter will be any of the following:

deg - Stands for degree. One full circle is equal to 360deg. For example: 20deg, 132deg etc.
grad - Stands for gradians. One full circle is equal to 400grad. For example: 12grad, 324grad etc.
rad - Stands for Radians. One full circle is equal to 6.2832rad. For example: 0.32rad, 3.43rad etc.
turn - Stands for turns. One full circle is equal to 1turn. For example: 0.1turn, 0.46turn

CSS Online Test

« Previous Tutorial Next Tutorial »