CSS Function - rotate3d()

The rotate3d() function in CSS used to rotate an element around a fixed axis on the three-dimensional surface, without causing any deformation. The result is a transform() datatype.

There are three degrees of freedom for rotations, in a three-dimensional space (3D), which combinedly is referred as the single axis of rotation. This rotational axis is defined by an [x, y, z] vector and pass by the origin.

When the vector is not normalized, i.e, the sum of the square of its three coordinates is not 1, it gets normalized internally by the user agent. In case of a non-normalizable vector, like a null vector, i.e, [0, 0, 0], the rotation gets ignored without invalidating the entired CSS property.

Possible values

The function rotate3d() accepts four values, i.e., three coordinates values (x, y, z) and an angle (a).

  • x: A number, representing the x-coordinate of the vector denoting the axis of rotation. Can be a positive or negative number.

  • y: A number, representing the y-coordinate of the vector denoting the axis of rotation. Can be a positive or negative number.

  • z: A number, representing the z-coordinate of the vector denoting the axis of rotation. Can be a positive or negative number.

  • a: An angle, representing the angle of rotation. A positive angle rotates the element in clockwise direction; whereas a negative angle rotates it in anti-clockwise direction.

Syntax

The function rotate3d() is specified by three <number>s and one <angle>. The three coordinates (x, y, z) of the vector denotes the axis of rotation, are represented by the <number>s. The <angle> denotes the angle of rotation, when positive rotates the element in clcokwise direction and when negative rotates it anti-clockwise direction.

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

CSS rotate3d() - Positive and Negative Values

Following is an example of rotate3d() function with various values as parameters, with positive and negative values:

<html>
<head>
<style>
   div {
      width: 100px;
      height: 100px;
      background-color: lightblue;
      margin-bottom: 1em;
   }

   .rotate-all-positive {
      background-color: lightgreen;
      transform: rotate3d(2, 1, 1, 45deg);
   }

   .rotate-all-negative {
      background-color: tomato;
      transform: rotate3d(-2, -1, -1, 45deg);
   }

   .rotate-mixed {
      background-color: cyan;
      transform: rotate3d(1,-2, 1, -60deg);
   }
</style>
</head>
<body>
   <div>No function</div>
   <div class="rotate-all-positive">
      rotate3d(2,1,1,45deg)  
   </div>
   <div class="rotate-all-negative">
      rotate3d(-2,-1,-1,45deg)  
   </div>
   <div class="rotate-mixed">
      rotate3d(1,-2,-1,-60deg)
   </div>
</body>
</html>

CSS rotate3d() - Rotation on all axes individually

Following is an example of rotate3d() function showing the rotation on various axes (x, y, z) individually:

<html>
<head>
<style>
   div {
      width: 100px;
      height: 100px;
      background-color: peachpuff;
      margin-bottom: 1em;
   }

   .rotate-x-axis {
      background-color: lightgreen;
      transform: rotate3d(1, 0, 0, 45deg);
   }

   .rotate-y-axis {
      background-color: tomato;
      transform: rotate3d(0, 1, 0, 45deg);
   }

   .rotate-z-axis {
      background-color: lightblue;
      transform: rotate3d(0, 0, 1, 45deg);
   }
</style>
</head>
<body>
   <div>No function</div>
   <div class="rotate-x-axis">
      rotate3d(1,0,0,45deg)  
   </div>
   <div class="rotate-y-axis">
      rotate3d(0,1,0,45deg)  
   </div>
   <div class="rotate-z-axis">
      rotate3d(0,0,1,45deg)  
   </div>
</body>
</html>
Advertisements