Post
Ask Question

3D Rotating Cube Using JavaScript And CSS3

Introduction

 
In this article, we will create a rotating cube using CSS3 and JavaScript. The cube can be rotated using navigation keys. Apart from this, all the faces of the cubes can be used for showing various types of content. In this article, I'm showing four different "iframes". So let's start.
 
Properties of cube
 
The following properties are used in implementing the rotating cube:
  • All cube faces are of equal area.
  • All edges of the cube face are equal in length.
  • All sides are angled at 90 degrees with each other.
  • The cube can be rotated by a minimum amount of 45 degrees.
HTML for cube
  1. <!DOCTYPE html>  
  2. <html>  
  3. <head>  
  4. <script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>  
  5. </head>  
  6. <body>  
  7. <div id="camera">  
  8.     <div id="cube">  
  9.         <div class="face one">  
  10.             <iframe src="http://codewithlogic.wordpress.com/" width=400 height=400 ></iframe>  
  11.         </div>  
  12.         <div class="face two">  
  13.             <iframe src="" width=400 height=400 ></iframe>  
  14.         </div>  
  15.         <div class="face three">  
  16.             <iframe src="http://www.c-sharpcorner.com/UploadFile/4aac15/working-with-javascript-timers/" width=400 height=400 ></iframe>  
  17.         </div>  
  18.         <div class="face four">  
  19.             <iframe src="http://www.c-sharpcorner.com/UploadFile/4aac15/windows-8-sidebar-for-website-using-jquery/" width=400 height=400 ></iframe>                </div>  
  20.         <div class="face five">  
  21.             <iframe src="http://www.c-sharpcorner.com/authors/4aac15/arpit-jain.aspx" width=400 height=400 ></iframe>       </div>  
  22.         <div class="face six">               
  23.         </div>  
  24.     </div>  
  25. </div>  
  26. </body>  
  27. </html> 
In the code above the div with id="camera" represents a perspective camera setting.
  • The div with id="cube" represents an entire cube. This div holds all the faces of the cube.
  • The div with id="face one" represents a first face of the cube and similarly for other cube faces.
  • The "iframe" inside the div represents the content of the cube face.
The following is the CSS for rotating the cube:
  1. #camera{  
  2.   -webkit-perspective:2000px ;  
  3. }  
  4.    
  5. #cube{  
  6.   height:400px;  
  7.   width:400px;  
  8.   position:absolute;  
  9.   top:50px;  
  10.   left:100px;  
  11.   border:1px solid green;  
  12.   -webkit-transition:all 5s linear;  
  13.   -webkit-transform-style:preserve-3d;  
  14. }  
  15. .face{  
  16.   position:absolute;  
  17.   width:400px;  
  18.   border:3px solid red;  
  19.   height:400px;  
  20.   background-color:rgba(50,50,50,0.7);  
  21. }  
  22.    
  23. #cube.one {  
  24.   -webkit-transform: rotateX(90deg) translateZ(200px);  
  25. }  
  26.    
  27. #cube.two{  
  28.   -webkit-transform: translateZ(200px);  
  29. }  
  30.    
  31. #cube.three{  
  32.   -webkit-transform: rotateY(90deg) translateZ(200px);  
  33. }  
  34.    
  35. #cube.four{  
  36.   -webkit-transform: rotateY(180deg) translateZ(200px);  
  37. }  
  38.    
  39. #cube.five{  
  40.   -webkit-transform: rotateY(-90deg) translateZ(200px);  
  41. }  
  42.    
  43. #cube.six{  
  44.   -webkit-transform: rotateX(-90deg) translateZ(200px) rotate(180deg);  
  45. } 
Line number 2 sets the depth of the z plane. It is required for a good 3D experience.
 
Line numbers 5-14 define the various properties of the cube, like its width, height, position, and so on. Line number 12 sets the time the cube takes to rotate 45 degrees. It is set to 5 seconds. Line number 14 preserves the 3D nature of the cube.
 
Line numbers 15-21 set the properties of the cube's face. The position of each cube face is absolute.
 
Line numbers 23 to 45 place the cube faces together to form a proper cube. For a better understanding of face, placement look at the following sequence of images.
 
 
 
 
 
 
 
JavaScript for rotating cube
  1. var xAngle = 0, yAngle = 0;  
  2. document.addEventListener('keydown',function(e)  
  3. {  
  4.    switch(e.keyCode)  
  5.     {  
  6.    
  7.    case37:// for left key  
  8.     yAngle -= 45;  
  9.    break;  
  10.    
  11.    case38:// for up key  
  12.     xAngle += 45;  
  13.    break;  
  14.    
  15.    case39:// for right key  
  16.     yAngle += 45;  
  17.    break;  
  18.    
  19.    case40:// for down key  
  20.     xAngle -= 45;  
  21.    break;  
  22.     }  
  23.     $('#cube').css("webkit-transform","rotateX("+xAngle+"deg) rotateY("+yAngle+"deg)");  
  24. },false); 
In the preceding JavaScript "xAngle" and "yAngle" represent the angle of the cube with the x-axes and the y-axes respectively. Initially, it is set to zero.
 
Line number 2 adds a key down event listener to the document so that the cube can respond to the keyboard navigation keys.
 
Line numbers 7 to 21 set the angle the cube is to be rotated. "e.keyCode" returns an ASCII code of the key and the case statement sets the angle accordingly.
 
Line number 23 sets the CSS transform property equal to the angle through which the cube is to be rotated.
 
Output
 
 
 

Summary

 
That's all for this article. You can enjoy this rotating cube by visiting the following link DEMO.  If you have any doubts then feel free to ask in the comments section.


Similar Articles