3D Cube using HTML5 CSS3

3D Cube using HTML5/Pure CSS3 No JavaScript

View Demo :  3D Cube using HTML5 and CSS3 no JavaScript

    Hello friends, here's nice and simple tutorial on how to build a 3D cube using HTML5/CSS3 with NO JavaScript coding. 

    As we know HTML5 is a new web emerging technology which features a lot of new improvements over HTML 4.1.Among these features, support for 2D/3D graphics is new , which is supported through following elements/css techniques:

• by using the new CANVAS element/tag
• by using the SVG (Scalable Vector Graphics) in HTML5
• by using CSS3

  In this post I am going to focus on 3rd technique for creating and animating a 3D cube i.e using CSS3.
So, lets get started.

HTML Part :

First take a look at complete cube html code :

                                   <div class="scene3d" style="margin-top: 40px;">
                         <div class="object3d " id="obj">
                               <div class="face3d"  id="f1" ></div>
                               <div class="face3d"  id="f2" ></div>
                               <div class="face3d"  id="f3" ></div>
                               <div class="face3d"  id="f4" ></div>
                               <div class="face3d"  id="f5" ></div>
                               <div class="face3d"  id="f6" ></div>
                         </div>
                 </div>

Explanation  :

 As we know a cube has 6 faces, so we have to create 6 divs for one each for a face:

                                          <div class="face3d"  id="f1" ></div>
                  <div class="face3d"  id="f2" ></div>
                  <div class="face3d"  id="f3" ></div>
                  <div class="face3d"  id="f4" ></div>
                  <div class="face3d"  id="f5" ></div>
                  <div class="face3d"  id="f6" ></div>

Now to hold these 6 faces a container(complete cube) is required hence

                    <div class="object3d " id="obj">
                          <div class="face3d"  id="f1" ></div>
                           ....
                          <div class="face3d"  id="f6" ></div>
               </div>

Now to hold a cube another container(scene3d) is required (this container is required to get a perspective view i.e 3D view of the cube which I will discuss later in the post) .

                          <div class="scene3d" style="margin-top: 40px;">
                  <div class="object3d " id="obj">
                       <div class="face3d"  id="f1" ></div>
                       ...
                       <div class="face3d"  id="f6" ></div>
                  </div>
            </div>

A scene can hold many cube and other 3D elements.

CSS3 Part :

Now since we created the html divs required, now have to apply css to these divs to get the 3D effect:

We have to align/position the 6 faces(divs) of the cube in 3D space so that it appears like a real cube.

The css for a single face is given below:

          .face3d
          {
             position: absolute;
             left: 165px;
             top: 15px;
             width:300px;
             height:300px;
             border:1px solid black;
          }

The css for 6 faces are as shown below:

               #f1{transform:translateZ(-150px);}    //face 1
             #f2{transform:translateZ(150px);}     //face 2
             #f3{transform:translateX(150px) rotateY(-90deg);} //face 3
             #f4{transform:translateX(-150px) rotateY(90deg);} //face 4
             #f5{transform:translateY(150px) rotateX(-90deg);} //face 5
             #f6{transform:translateY(-150px) rotateX(90deg);} //face 6
  
The translateZ(-150px)  translates the face 1 (#f1) along the Z-axis.
Similarly translateZ(150px)  translates the face 2 (#f2) along the Z-axis

Third line transform:translateX(150px) rotateY(-90deg) first translate face 3(#f3) along x-axis then rotates it -90deg along Y-axis with transform-origin as center of the face it self.

Similarly other we transform other faces.

By default, these transforms will be in 2D space hence we wont get a perfect cube as shown below .

2D transform

Hence we have to specify to preserve the 3D meaning of the transforms, therefore we will create a wrapper (#obect3d).

The css for #object3D is as follow:

    .object3d
        {
                         transform-style: preserve-3d;
            width: inherit;
           height: inherit;
           position: absolute;
           transform: rotateX(40deg) rotateY(45deg) rotateZ(0deg);
        }

And to get the perspective view we specify the css for scene (#scene3d)

           

            .scene3d
         {
           perspective:1000px;  // for perspective view otherwise it wont look 

                               // like a real cube
           width: 600px;
           height: 340px;
           margin-left: auto;
           margin-right: auto;
         }

Hence the final cube will be as follow:

3D cube Skeleton

Since each face of cube is nothing but a div you can add anything to a face and it will have a 3D look.

Important Note : You may have to attach the prefix to transform-style ,transform, animation ,perspective according to your browser  

e.g for Firefox
     -moz-transform-style:preserve-3d;

     -moz-transform:rotateX(90deg);

for Webkit

     -webkit-transform-style:preserve-3d;

     -webkit-transform:rotateX(90deg);

If you don't want to specify the prefix for each and every browser you can include the prefixfree.js plugin which automatically attach the prefix according to your browser.

                <script type="text/javascript" src="prefixfree.min.js" />


  Download  prefixfree.js from here http://leaverou.github.com/prefixfree/

 View Demo :  3D Cube using HTML5 and CSS3 no JavaScript