Jobs Hub

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 example

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:

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 »