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>
      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);}
   <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>

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:

  • 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 »

Follow/Like Us on Facebook

Subscribe Us on YouTube