Jobs Hub

CSS transform: rotateX()

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

css rotatex function

For example:

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

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

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

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

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

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

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

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

Without rotateX()

rotateX(12deg)

rotateX(25deg)

rotateX(45deg)

rotateX(80deg)

rotateX(90deg)

rotateX(135deg)

rotateX(180deg)

CSS rotateX() Syntax

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

transform: rotateX(degree);

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

CSS Online Test

« Previous Tutorial Next Tutorial »