Create rotating 3D rectangular prism/box using pure CSS

Want to create cool 3D Box effect? Follow this guide and you will be able to, alternatively you can check this tutorial by David DeSandro out from which I have learned how to create this effect.

Examples

Front - 360 X axis rotation

Left - 360 X axis rotation

Right - 360 X axis rotation

Back - 360 X axis rotation

Top - 360 X axis rotation

Bottom - 360 X axis rotation

Front - 360 Y axis rotation

Left - 360 Y axis rotation

Right - 360 Y axis rotation

Back - 360 Y axis rotation

Top - 360 Y axis rotation

Bottom - 360 Y axis rotation

Front - 360 X and Y axis rotation

Left -360 X and Y axis rotation

Right - 360 X and Y axis rotation

Back - 360 X and Y axis rotation

Top - 360 X and Y axis rotation

Bottom - X and Y axis rotation

jQuery! Front - 360 X axis rotation

jQuery! Left -360 X axis rotation

jQuery! Right - 360 X axis rotation

jQuery! Back - 360 X axis rotation

jQuery! Top - 360 X axis rotation

jQuery! Bottom - X axis rotation

Step 1: HTML structure

The "boxWrapper" is a container which sets up the 3D perspective as you will later see in CSS. 
The "box" is the actual box that will be rotated along with all of its sides. 
You will notice that "left" and "right" sides differ slightly - they have "shortSide" class assigned,  because in this particular example we are actually making rectangular prism and not a box. 
If we were creating the box, all of the sides would make use of the same class.

• <div class="boxWrapper">
•   <div class="box">
•     <div class="front side"></div>
•     <div class="left shortSide"></div>
•     <div class="right shortSide"></div>
•     <div class="back side"></div>
•     <div class="top side"></div>
•     <div class="bottom side"></div>
•   </div>
• </div>

Step 2: CSS

The "boxWrapper" is the container in which we store our box and its sides - it defines the transform perspective for the 3D effect and also the width and height of our box.

• .boxWrapper
• {
•   cursor: pointer;
•   width: 400px;
•   height: 140px;
•   position: relative;
•   perspective: 1000px;
• }

The "box" defines the initial transform (rotation), transform transition and transform style that will give the 3D effect. The "box:active" specifies what happens when box is activated (clicked on) - in this example it is rotated 360 degrees on X axis but you may specify as many degrees as you want and any of the three axes (X,Y,Z).

• .box
• {
•   transition: transform 1s;
•   transform: rotateX(0deg);
•   width: 100%;
•   height: 100%;
•   position: absolute;
•   transform-style: preserve-3d;
• }
• .box:active
• {
•   transform: rotateY(360deg);
• }

All of the sides inside of the box need to be transformed to form a 3D structure - in order to do that transform rotation and translation are used. As you can see sides are rotated according to the place they are in - back is flipped, right and left sides are rotated to the right and left by 90 degrees respectively and top and bottom sides are rotated up and down by 90 degrees respectively. 
Also all of the sides are translated "out" on a Z axis by appropriate values so that they all meet (plus 2px because of the border). It may sometimes be confusing (e.g. because of the content flow) to work out what translation values should be, I find it easiest to simply fiddle with them for a bit until they match.

• .box .front { transform: rotateY(0deg) translateZ(72px); }
• .box .back { transform: rotateX(180deg) translateZ(72px); }
• .box .right { transform: rotateY(90deg) translateZ(332px); }
• .box .left { transform: rotateY(-90deg) translateZ(72px); }
• .box .top { transform: rotateX(90deg) translateZ(72px); }
• .box .bottom { transform: rotateX(-90deg) translateZ(72px); }

In this example there are 4 "front" ones and 2 "side" ones. They only differ in dimensions and you could use single style if you were creating box. 
Rest of the attributes are there for styling purposes such as horizontal and vertical centering of text, background and text colour and removal of margin.
 

• .side
• {
•   width: 400px;
•   height: 140px; 
•   margin: 0;
•   position: absolute;
•   border: 2px solid black;
•   background-color: rgba(30,30,30,0.50);
•   color: white;
•   text-align: center;
•   vertical-align: middle;
• }
• .shortSide
• {
•   width: 140px;
•   height: 140px;
•   position: absolute;
•   border: 2px solid black;
•   background-color: rgba(30,30,30,0.50);
•   color: white;
•   text-align: center;
•   vertical-align: middle;
• }

Step 3: Little bit of jQuery

If you don't mind, you can also add little bit of a jQuery (or vanilla JavaScript if that is your thing) to make your already cool effect absolutely awesome. This implementation also works much better on mobile devices where long press (required by ":active") on a screen often causes text highlighting or browser options to appear.

• function animateAll()
• {
•   //rotate anything with this class
•   $(".jRotatable").click(function()
•   {
•     //we only want to rotate currently clicked box
•     rotateBox(this);
•   }); //click
•   function rotateBox(boxID)
•   {
•     var boxObject = $(pBoxID);
•     var currentRotationX = boxObject.data("rotationX");
•     //lets reset value for good practice
•     if(currentRotation == 360)
•     {
•       boxObject.data("rotationx", 0);
•     }
•     var newRotation = currentRotation + 90;
•     boxObject.data("rotationx", newRotation);
•     boxObject.css({"transform": "rotateX("+newRotation+"deg)"});
•   }
• }