Join the social network of Tech Nerds, increase skill rank, get work, manage projects...
 

  • How to make rotating cube in html5 and css3

    @indu.gupta
    Recommendations Offline Message

    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 852
    Comment on it

    Hello Readers, Here is a blog on making a rotating cube. For this we will make an HTML page and a CSS page. First, make an HTML page named index.html and write the below code.

    1. <html>
    2.  
    3. <head>
    4.  
    5. <title>Rotating Cube</title>
    6.  
    7. <link rel="stylesheet" type="text/css" href="style.css">
    8.  
    9. </head>
    10.  
    11.  
    12. <body>
    13.  
    14. <div class="upper">
    15. <div class="spin-wrapper" >
    16.  
    17. <div class="cube-face1">
    18. 1
    19. </div>
    20.  
    21. <div class="cube-face2">
    22. 2
    23. </div>
    24.  
    25. <div class="cube-face3">
    26. 3
    27. </div>
    28.  
    29. <div class="cube-face4">
    30. 4
    31. </div>
    32.  
    33. <div class="cube-face5">
    34. 5
    35. </div>
    36.  
    37. <div class="cube-face6">
    38. 6
    39. </div>
    40.  
    41. </div>
    42. </div>
    43.  
    44. </body>
    45.  
    46. </html>

     

     

    Now we will make a CSS file named style.css and write the following code:

    1. .upper
    2. {
    3.    width: 150px;
    4.    height: 150px;
    5.    margin:auto;
    6.    margin-top:5%;
    7.  }
    8.  
    9.  
    10.   .spin-wrapper > div
    11.   {
    12.     font-size: 100px;
    13.     width: 150px;
    14.     height: 150px;
    15.     text-align: center;
    16.     position: absolute;
    17.     line-height: 150px;
    18.     border: 1px solid #fff;
    19.     background: rgba(0,0,0,0.8);
    20.     color:white;
    21.     box-shadow: inset 0 0 100px rgba(255,255,255,0.2);      
    22.   }
    23.  
    24.  
    25.   .spin-wrapper > .cube-face1
    26.   {
    27.     -moz-transform: translateZ(75px);
    28.     -webkit-transform: translateZ(75px);
    29.     -ms-transform: translateZ(75px);
    30.      transform: translateZ(75px);
    31.   }
    32.  
    33.  
    34.   .spin-wrapper > .cube-face2
    35.   {
    36.     -moz-transform: rotateY(90deg) translateZ(75px);
    37.     -webkit-transform: rotateY(90deg) translateZ(75px);
    38.     -ms-transform: rotateY(90deg) translateZ(75px);
    39.      transform: rotateY(90deg) translateZ(75px);
    40.   }
    41.  
    42.  
    43.   .spin-wrapper > .cube-face3
    44.   {
    45.     -moz-transform: rotateY(90deg) rotateX(90deg) translateZ(75px);
    46.     -webkit-transform: rotateY(90deg) rotateX(90deg) translateZ(75px);   
    47.     -ms-transform: rotateY(90deg) rotateX(90deg) translateZ(75px);
    48.      transform: rotateY(90deg) rotateX(90deg) translateZ(75px);
    49.   }
    50.  
    51.  
    52.   .spin-wrapper > .cube-face4
    53.   {
    54.     -moz-transform: rotateY(180deg) rotateZ(90deg) translateZ(75px);
    55.     -webkit-transform: rotateY(180deg) rotateZ(90deg) translateZ(75px);
    56.     -ms-transform: rotateY(180deg) rotateZ(90deg) translateZ(75px);
    57.     transform: rotateY(180deg) rotateZ(90deg) translateZ(75px);
    58.   }
    59.  
    60.  
    61.   .spin-wrapper > .cube-face5
    62.   {
    63.     -moz-transform: rotateY(-90deg) rotateZ(90deg) translateZ(75px);
    64.     -webkit-transform: rotateY(-90deg) rotateZ(90deg) translateZ(75px);   
    65.     -ms-transform: rotateY(-90deg) rotateZ(90deg) translateZ(75px);
    66.      transform: rotateY(-90deg) rotateZ(90deg) translateZ(75px);
    67.   }
    68.  
    69.  
    70.   .spin-wrapper > .cube-face6
    71.   {
    72.     -moz-transform: rotateX(-90deg) translateZ(75px);
    73.     -webkit-transform: rotateX(-90deg) translateZ(75px);
    74.     -ms-transform: rotateX(-90deg) translateZ(75px);
    75.      transform: rotateX(-90deg) translateZ(75px);
    76.   }
    77.  
    78.  
    79.   @-webkit-keyframes spincube {
    80.     from,to  { -webkit-transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg); }
    81.     16%      { -webkit-transform: rotateY(-90deg);                            }
    82.     33%      { -webkit-transform: rotateY(-90deg) rotateZ(90deg);   }
    83.     50%      { -webkit-transform: rotateY(-180deg) rotateZ(90deg); }
    84.     66%      { -webkit-transform: rotateY(-270deg) rotateX(90deg); }
    85.     83%      { -webkit-transform: rotateX(90deg);                            }
    86.   }
    87.  
    88.  
    89.   @keyframes spincube {
    90.     from,to {
    91.       -moz-transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg);
    92.       -ms-transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg);
    93.        transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg);
    94.     }
    95.  
    96.  
    97.     16% {
    98.       -moz-transform: rotateY(-90deg);
    99.       -ms-transform: rotateY(-90deg);
    100.        transform: rotateY(-90deg);
    101.     }
    102.  
    103.  
    104.     33% {
    105.       -moz-transform: rotateY(-90deg) rotateZ(90deg);
    106.       -ms-transform: rotateY(-90deg) rotateZ(90deg);
    107.        transform: rotateY(-90deg) rotateZ(90deg);
    108.     }
    109.  
    110.  
    111.     50% {
    112.       -moz-transform: rotateY(-180deg) rotateZ(90deg);
    113.       -ms-transform: rotateY(-180deg) rotateZ(90deg);
    114.        transform: rotateY(-180deg) rotateZ(90deg);
    115.     }
    116.  
    117.  
    118.     66% {
    119.       -moz-transform: rotateY(-270deg) rotateX(90deg);
    120.       -ms-transform: rotateY(-270deg) rotateX(90deg);
    121.        transform: rotateY(-270deg) rotateX(90deg);
    122.     }
    123.  
    124.  
    125.     83% {
    126.       -moz-transform: rotateX(90deg);
    127.       -ms-transform: rotateX(90deg);
    128.        transform: rotateX(90deg);
    129.     }
    130.  
    131.  
    132.   }
    133.  
    134.   .spin-wrapper
    135.   {
    136.     -webkit-animation-name: spincube;
    137.     -webkit-animation-timing-function: ease-in-out;
    138.     -webkit-animation-iteration-count: infinite;
    139.     -webkit-animation-duration: 12s;
    140.  
    141.      animation-name: spincube;
    142.      animation-timing-function: ease-in-out;
    143.      animation-iteration-count: infinite;
    144.      animation-duration: 12s;
    145.  
    146.     -webkit-transform-style: preserve-3d;
    147.     -moz-transform-style: preserve-3d;
    148.     -ms-transform-style: preserve-3d;
    149.      transform-style: preserve-3d;
    150.  
    151.     -webkit-transform-origin: 75px 75px 0;
    152.     -moz-transform-origin: 75px 75px 0;
    153.     -ms-transform-origin: 75px 75px 0;
    154.      transform-origin: 75px 75px 0;
    155.   }

     

    Comment:

    The @keyframes is used to specify the animation code. The animation is created by  changing a set of CSS  to another as many times.{ @-webkit-keyframes spincube {

    from,to } specify when the style change will happen in percent, from is the beginning of the animation, to is the end of an animation.

     

    Note:-The transform property supports  all latest version of Safari 9+, Chrome 43+
    , Firefox 16+, Opera 30+, and IE 10+.

    HTML5 css3 keyframes transform cube Animation
    Comment on it

 0 Comment(s)

Sign In
Forgot Password?
                           OR                           
Create an account !!
                           OR                           
Register

Sign up using

                           OR                           
Forgot Password
Reset Password
Fill out the form below and reset your password: