Create 3-dimensional cube using CSS properties only

We can create an impression of a 3-dimensional cube using only CSS properties.Using skew property and rotating the rectangles,individual faces of cubes can be aggregated to draw a 3D object.

Supported browsers: Fire­fox 3.5+,  Safari 3.2+, Google Chrome.

We need to create separate div, class and contents for each face.The top face of the cube needs extra markup.

        
                
                 TOP FACE
         

         You can write contents for top face here.
                
        
        
                LEFT FACE
        

        You can write contents for left face here.
        
        
                RIGHT FACE
        

        You can write contents for right face here.
        
  

.cube_3d {
           position: relative;
           top: 300px;
           left: 500px;
   }

This code takes care of the positioning of the cube.It places the cube 300px from top and 500px from left.

  .right_face,
   .left_face,
   .top_face div {
        padding: 10px;
        width: 280px;
        height: 280px;
   }


Each face is 300 x 300 px which includes 10px of padding.


  .right_face,
  .left_face,
  .top_face{
        position: absolute;
  }

Each faces are positioned absolutely.

Now the right rectangle is skewed by 30° and the left rectangle is skewed by -30° along the vertical axis, and the right face is shifted to left by 300px.
We can also give different color for each face and also different font size for texts on each faces.

.right_face {
       -moz-transform: skewY(-30deg);
       background-color: green;
       left: 300px;
       text-align:center;
       font-size: 20px;
  }

  .left_face {
       -moz-transform: skewY(30deg);
       background-color: orange;
       text-align:center;
       font-size: 20px;
  }

The top face of the cube needs some extra work to be done.The top face is skewed -30° along the vertical axis,then it is rotated by 60°.
Then it is positioned by scaling factor of 1.16 in Y-direction(Need to be set accordingly).

.top_face div {
       -moz-transform: skewY(-30deg) scaleY(1.16);
       background-color: brown;
       font-size: 20px;
       text-align:center;
  }

 .top_face {
       -moz-transform: rotate(60deg);
       top: -238px;
       left: 151px;
  }

For Safari use -webkit-transform at the place of -moz-transform.

At the end we get our final CSS:

.cube_3d {
        position: relative;
        top: 300px;
        left: 500px;
    }

  .right_face,
  .left_face,
  .top_face div {
        padding: 10px;
        width: 280px;
        height: 280px;

   }

  .right_face,
  .left_face,
  .top_face{
        position: absolute;
  }

  .left_face {
        -moz-transform: skewY(30deg);
        background-color: orange;
        text-align:center;
        font-size: 20px;
  }

  .right_face {
        -moz-transform: skewY(-30deg);
        background-color: green;
        left: 300px;
        text-align:center;
        font-size: 20px;
  }

  .top_face div {
        -moz-transform: skewY(-30deg) scaleY(1.16);
         background-color: brown;
         font-size: 20px;
         text-align:center;
  }

   .top_face {
        -moz-transform: rotate(60deg);
         top: -238px;
         left: 151px;
  }