CSS 3D Transforms

The transformation of an element on a z-axis or in 3D space comes under the category of 3D transforms. For example:

HTML with CSS Code

<!DOCTYPE html>
<html>
<head>
   <style>
      #myd {width: 160px; height: 160px; transform-style: preserve-3d;
         margin: 80px auto; animation-name: fresherearth;
         animation-duration: 1.2s; animation-iteration-count: infinite;
         animation-timing-function: cubic-bezier(.05,1.6,.94,.03);}
         
      .side {display: flex; align-items: center; justify-content: center;
         width: 100%; height: 100%; position: absolute; font-size: 90px; color: whitesmoke;}

      .frontFace {background: rgba(70, 69, 69, 0.72); transform: translateZ(80px);}
      .backFace {background: rgba(167, 109, 22, 0.72); transform: rotateY(180deg) translateZ(80px);}
      .rightFace {background: rgba(248, 30, 1, 0.72); transform: rotateY(90deg) translateZ(80px);}
      .leftFace {background: rgba(5, 5, 248, 0.72); transform: rotateY(-90deg) translateZ(80px);}
      .topFace {background: rgba(8, 240, 8, 0.72); transform: rotateX(90deg) translateZ(80px);}
      .bottomFace {background: rgba(198, 201, 19, 0.856); transform: rotateX(-90deg) translateZ(80px);}

      @keyframes fresherearth {
         0% {transform: rotate3d(1, 1, 1, -60deg);}
         20% {transform: rotate3d(1, 1, 1, -120deg);}
         40% {transform: rotate3d(1, 1, 1, -180deg);}
         60% {transform: rotate3d(1, 1, 1, -240deg);}
         80% {transform: rotate3d(1, 1, 1, -300deg);}
         100% {transform: rotate3d(1, 1, 1, -360deg);}
      }
   </style>
</head>
<body>
   
   <div id="myd">
      <div class="side frontFace">1</div>
      <div class="side backFace">2</div>
      <div class="side rightFace">3</div>
      <div class="side leftFace">4</div>
      <div class="side topFace">5</div>
      <div class="side bottomFace">6</div>
   </div>
   
</body>
</html>

Output

The above 3D animated box, or simply a die, was created using CSS. While creating this box, multiple transform functions are required to be used. Let's check it out, step by step.

CSS 3D Transform Example: Step No. 1

HTML with CSS Code

<!DOCTYPE html>
<html>
<head>
   <style>
      #myd {width: 160px; height: 160px; border: 1px solid red;}
   </style>
</head>
<body>
   
   <div id="myd">
      <div class="side frontFace">1</div>
      <div class="side backFace">2</div>
      <div class="side rightFace">3</div>
      <div class="side leftFace">4</div>
      <div class="side topFace">5</div>
      <div class="side bottomFace">6</div>
   </div>
   
</body>
</html>

Output

CSS 3D Transform Example: Step No. 2

Add the following CSS code to the example above:

.side{display: flex; align-items: center; justify-content: center;}

Now the output will be:

Note: The justify-content property is used to line up the content in a flex container along the main or horizontal axis.

Note: The align-items is used to align items inside the flex container.

Note: The FlexBox and flex are defined in their separate tutorials.

CSS 3D Transform Example: Step No. 3

Again, add the following CSS code in the example above:

.backFace{background: rgba(167, 109, 22, 0.72); transform: rotateY(180deg);}

Now the output will be:

The "2" gets reversed using "transform: rotateY(180deg);". Now the "2" looks like we're seeing it from its back.

Note: The rotateY() function rotates an element along the y-axis.

CSS 3D Transform Example: Step No. 4

NNow replace the whole CSS code with the following:

#myd {width: 160px; height: 160px; border: 1px solid red;
   transform-style: preserve-3d;}
.side{display: flex; align-items: center; justify-content: center;
   position: absolute; width: 100%; height: 100%; font-size: 90px;
   color: whitesmoke;}
.backFace{background: rgba(167, 109, 22, 0.72); transform: rotateY(180deg);}

Now the output will be:

That is, using width: 100%; height: 100%;, each and every DIV (with class name side) gets occupy the whole area of DIV whose id is myd. And using position: absolute;, all the DIV gets positioned one over another. And finally using the transform-style: preserve-3d;, all the 6 DIV gets inside the DIV whose id is myd.

Note - The transform-style property is used set whether the child elements are positioned in 3D space or not.

Now let's do some marginal modification of the code, to transform each and every face, to arrange all the six faces or sides, to make a 3D box, that will be a Die.

CSS 3D Transform Example - Step No.5

Replace the whole CSS code from above example, with:

#myd {width: 160px; height: 160px; border: 1px solid red; margin: 80px auto;
   transform-style: preserve-3d; transform: rotate3d(12, -7, 1, 20deg);}
.side{display: flex; align-items: center; justify-content: center;
   position: absolute; width: 100%; height: 100%; font-size: 90px;
   color: whitesmoke;}
.frontFace {background: rgba(70, 69, 69, 0.72);}
.backFace {background: rgba(167, 109, 22, 0.72); transform: rotateY(180deg);}
.rightFace {background: rgba(248, 30, 1, 0.72); transform: rotateY(90deg);}
.leftFace {background: rgba(5, 5, 248, 0.72); transform: rotateY(-90deg);}
.topFace {background: rgba(8, 240, 8, 0.72); transform: rotateX(90deg);}
.bottomFace {background: rgba(198, 201, 19, 0.856); transform: rotateX(-90deg);}

Now the output will be:

Now the only thing, we need to change, is to use translateZ() function to transform the box to the original position, to make a Die. Let's do it.

CSS 3D Transform Example - Step No.6

Add the translateZ(80px) to every side. Then the output will be:

CSS 3D Transform Example - Final Step

Now remove the border: 1px solid red;. Here is the complete code and its output:

HTML with CSS Code

<!DOCTYPE html>
<html>
<head>
   <style>
      #myd {width: 160px; height: 160px; margin: 80px auto;
         transform-style: preserve-3d; transform: rotate3d(12, -7, 1, 20deg);}
		 
      .side{display: flex; align-items: center; justify-content: center;
         position: absolute; width: 100%; height: 100%; font-size: 90px;
         color: whitesmoke;}

      .frontFace {background: rgba(70, 69, 69, 0.72); transform: translateZ(80px);}
      .backFace {background: rgba(167, 109, 22, 0.72); transform: rotateY(180deg) translateZ(80px);}
      .rightFace {background: rgba(248, 30, 1, 0.72); transform: rotateY(90deg) translateZ(80px);}
      .leftFace {background: rgba(5, 5, 248, 0.72); transform: rotateY(-90deg) translateZ(80px);}
      .topFace {background: rgba(8, 240, 8, 0.72); transform: rotateX(90deg) translateZ(80px);}
      .bottomFace {background: rgba(198, 201, 19, 0.856); transform: rotateX(-90deg) translateZ(80px);}
   </style>
</head>
<body>
   
   <div id="myd">
      <div class="side frontFace">1</div>
      <div class="side backFace">2</div>
      <div class="side rightFace">3</div>
      <div class="side leftFace">4</div>
      <div class="side topFace">5</div>
      <div class="side bottomFace">6</div>
   </div>
   
</body>
</html>

Output

You can change the value of rotate3d() function, to rotate the Die.

Since this is not a tutorial of animation, therefore I'm not going to add some more steps to bound the element to animate. You can learn about animation, in its separate tutorial. However, the animation-name defines name for an animation, animation-duration defines time to complete one iteration or cycle of animation, animation-timing-function defines the speed curve of an animation, or define the way to process an animation and animation-iteration-count defines the total number of iterations or cycles for an animation to play.

CSS 3D Transform Functions

transform: translateZ() - moves an element front/back on z-axis
transform: translate3d(x, y, z) - moves an element right/left on x-axis, up/down on y-axis, and front/back on z-axis, at once
transform: scaleZ() - resizes an element on z-axis
transform: scale3d(x, y, z) - resizes an element on x-axis, y-axis, and z-axis, at once
transform: rotateX() - rotates an element along x-axis
transform: rotateY() - rotates an element along y-axis
transform: rotateZ() - rotates an element along z-axis
transform: rotate3d(x, y, z, angle) - rotates an element along x-axis, y-axis, and z-axis, at once, with a particular degree
transform: skewX() - skews an element horizontally
transform: skewY() - skews an element vertically
transform: skew(xAngle, yAngle) - skews an element horizontally and vertically both at once
matrix(a, b, c, d, e, f) - scale, skew, and translate an element on both x-axis and y-axis, at once
matrix3d(a1, b1, c1, d1, a2, b2, c2, d2, a3, b3, c3, d3, a4, b4, c4, d4) - used to apply a 3D transformation as a 4x4 homogeneous matrix, to an element

You can use combination of multiple transform functions to transform an element that becomes or looks like a 3D viewing element or whatever you say.

CSS Online Test

« Previous Tutorial Next Tutorial »