CSS transform: rotate()

The CSS rotate() function is used to define the transform property, to rotate an element on the plane surface. For example:

HTML with CSS Code

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

   <h2>rotate(25deg)</h2>
   <div class="b"></div>

   <h2>rotate(80deg)</h2>
   <div class="c"></div>

   <h2>rotate(90deg)</h2>
   <div class="d"></div>

   <h2>rotate(135deg)</h2>
   <div class="e"></div>

   <h2>rotate(180deg)</h2>
   <div class="f"></div>

   <h2>rotate(-25deg)</h2>
   <div class="g"></div>
   
</body>
</html>

Output

Without rotate()

rotate(25deg)

rotate(80deg)

rotate(90deg)

rotate(135deg)

rotate(180deg)

rotate(-25deg)

The default rotation is clockwise, whereas giving negative values (degrees) will rotate an element anti or counter clockwise.

Note - The rotate() function does similar job as of rotateZ().

CSS rotate() Syntax

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

transform: rotate(degree);

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

deg - Stands for degree. One full circle is equal to 360deg
grad - Stands for gradians. One full circle is equal to 400grad
rad - Stands for Radians. One full circle is equal to 6.2832rad
turn - Stands for turns. One full circle is equal to 1turn

CSS Online Test

« Previous Tutorial Next Tutorial »