CSS transform: rotate3d()

The CSS rotate3d() function is used to define the transform property, to rotate an element along x, y, and z axes with a given degree. For example:

HTML with CSS Code

<!DOCTYPE html>
<html>
<head>
   <style>
      div{width: 120px; height: 60px; background: peru; margin: auto;}
      .b{transform: rotate3d(1, 1, 1, 25deg);}
      .c{transform: rotate3d(1, 1, 1, 60deg);}
      .d{transform: rotate3d(2, 1, 1, 60deg);}
      .e{transform: rotate3d(1, 2, 1, 60deg);}
      .f{transform: rotate3d(1, 1, 2, 60deg);}
      .g{transform: rotate3d(3, 5, 2, 90deg);}
   </style>
</head>
<body>
   
   <h2>Without rotate3d()</h2>
   <div class="a"></div>

   <h2>rotate3d(1, 1, 1, 25deg)</h2>
   <div class="b"></div>

   <h2>rotate3d(1, 1, 1, 60deg)</h2>
   <div class="c"></div>

   <h2>rotate3d(2, 1, 1, 60deg)</h2>
   <div class="d"></div>

   <h2>rotate3d(1, 2, 1, 60deg)</h2>
   <div class="e"></div>

   <h2>rotate3d(1, 1, 2, 60deg)</h2>
   <div class="f"></div>

   <h2>rotate3d(3, 5, 2, 90deg)</h2>
   <div class="g"></div>
   
</body>
</html>

Output

Without rotate3d()

rotate3d(1, 1, 1, 25deg)

rotate3d(1, 1, 1, 60deg)

rotate3d(2, 1, 1, 60deg)

rotate3d(1, 2, 1, 60deg)

rotate3d(1, 1, 2, 60deg)

rotate3d(3, 5, 2, 90deg)

Basically, the rotate3d() function is used to define a 3D rotation, in this way:

CSS rotate3d() Syntax

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

transform: rotate3d(x, y, z, degree);

The value of x, y, and z will be a positive, zero, or a negative number. Whereas the value of degree 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

Therefore, the rotate3d() function is used to apply rotateX(), rotateY(), and rotateZ() at once, with specified degree. Therefore, the general form of rotate3d(), can also be written as:

transform: rotate3d(rotateX(), rotateY(), rotateZ(), degree);

CSS Online Test

« Previous Tutorial Next Tutorial »