Join the social network of Tech Nerds, increase skill rank, get work, manage projects...
 
  • How to make rotating cube in html5 and css3

    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 817
    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.

    <html>
    
    <head>
    
    <title>Rotating Cube</title>
    
    <link rel="stylesheet" type="text/css" href="style.css">
    
    </head>
    
    
    <body>
    
    <div class="upper">
    <div class="spin-wrapper" >
    
    <div class="cube-face1">
    1
    </div>
    
    <div class="cube-face2">
    2
    </div>
    
    <div class="cube-face3">
    3
    </div>
    
    <div class="cube-face4">
    4
    </div>
    
    <div class="cube-face5">
    5
    </div>
    
    <div class="cube-face6">
    6
    </div>
    
    </div>
    </div>
    
    </body>
    
    </html>

     

     

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

    .upper
    {
       width: 150px;
       height: 150px;
       margin:auto;
       margin-top:5%;
     }
    
    
      .spin-wrapper > div
      {
        font-size: 100px;
        width: 150px;
        height: 150px;
        text-align: center;
        position: absolute;
        line-height: 150px;
        border: 1px solid #fff;
        background: rgba(0,0,0,0.8);
        color:white;
        box-shadow: inset 0 0 100px rgba(255,255,255,0.2);      
      }
    
    
      .spin-wrapper > .cube-face1
      {
        -moz-transform: translateZ(75px);
        -webkit-transform: translateZ(75px);
        -ms-transform: translateZ(75px);
         transform: translateZ(75px);
      }
    
    
      .spin-wrapper > .cube-face2
      {
        -moz-transform: rotateY(90deg) translateZ(75px);
        -webkit-transform: rotateY(90deg) translateZ(75px);
        -ms-transform: rotateY(90deg) translateZ(75px);
         transform: rotateY(90deg) translateZ(75px);
      }
    
    
      .spin-wrapper > .cube-face3
      {
        -moz-transform: rotateY(90deg) rotateX(90deg) translateZ(75px);
        -webkit-transform: rotateY(90deg) rotateX(90deg) translateZ(75px);   
        -ms-transform: rotateY(90deg) rotateX(90deg) translateZ(75px);
         transform: rotateY(90deg) rotateX(90deg) translateZ(75px);
      }
    
    
      .spin-wrapper > .cube-face4
      {
        -moz-transform: rotateY(180deg) rotateZ(90deg) translateZ(75px);
        -webkit-transform: rotateY(180deg) rotateZ(90deg) translateZ(75px);
        -ms-transform: rotateY(180deg) rotateZ(90deg) translateZ(75px);
        transform: rotateY(180deg) rotateZ(90deg) translateZ(75px);
      }
    
    
      .spin-wrapper > .cube-face5
      {
        -moz-transform: rotateY(-90deg) rotateZ(90deg) translateZ(75px);
        -webkit-transform: rotateY(-90deg) rotateZ(90deg) translateZ(75px);   
        -ms-transform: rotateY(-90deg) rotateZ(90deg) translateZ(75px);
         transform: rotateY(-90deg) rotateZ(90deg) translateZ(75px);
      }
    
    
      .spin-wrapper > .cube-face6
      {
        -moz-transform: rotateX(-90deg) translateZ(75px);
        -webkit-transform: rotateX(-90deg) translateZ(75px);
        -ms-transform: rotateX(-90deg) translateZ(75px);
         transform: rotateX(-90deg) translateZ(75px);
      }
    
    
      @-webkit-keyframes spincube {
        from,to  { -webkit-transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg); }
        16%      { -webkit-transform: rotateY(-90deg);                            }
        33%      { -webkit-transform: rotateY(-90deg) rotateZ(90deg);   }
        50%      { -webkit-transform: rotateY(-180deg) rotateZ(90deg); }
        66%      { -webkit-transform: rotateY(-270deg) rotateX(90deg); }
        83%      { -webkit-transform: rotateX(90deg);                            }
      }
    
    
      @keyframes spincube {
        from,to {
          -moz-transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg);
          -ms-transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg);
           transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg);
        }
    
    
        16% {
          -moz-transform: rotateY(-90deg);
          -ms-transform: rotateY(-90deg);
           transform: rotateY(-90deg);
        }
    
    
        33% {
          -moz-transform: rotateY(-90deg) rotateZ(90deg);
          -ms-transform: rotateY(-90deg) rotateZ(90deg);
           transform: rotateY(-90deg) rotateZ(90deg);
        }
    
    
        50% {
          -moz-transform: rotateY(-180deg) rotateZ(90deg);
          -ms-transform: rotateY(-180deg) rotateZ(90deg);
           transform: rotateY(-180deg) rotateZ(90deg);
        }
    
    
        66% {
          -moz-transform: rotateY(-270deg) rotateX(90deg);
          -ms-transform: rotateY(-270deg) rotateX(90deg);
           transform: rotateY(-270deg) rotateX(90deg);
        }
    
    
        83% {
          -moz-transform: rotateX(90deg);
          -ms-transform: rotateX(90deg);
           transform: rotateX(90deg);
        }
    
    
      }
    
      .spin-wrapper
      {
        -webkit-animation-name: spincube;
        -webkit-animation-timing-function: ease-in-out;
        -webkit-animation-iteration-count: infinite;
        -webkit-animation-duration: 12s;
    
         animation-name: spincube;
         animation-timing-function: ease-in-out;
         animation-iteration-count: infinite;
         animation-duration: 12s;
    
        -webkit-transform-style: preserve-3d;
        -moz-transform-style: preserve-3d;
        -ms-transform-style: preserve-3d;
         transform-style: preserve-3d;
    
        -webkit-transform-origin: 75px 75px 0;
        -moz-transform-origin: 75px 75px 0;
        -ms-transform-origin: 75px 75px 0;
         transform-origin: 75px 75px 0;
      }

     

    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+.

 0 Comment(s)

Sign In
                           OR                           
                           OR                           
Register

Sign up using

                           OR                           
Forgot Password
Fill out the form below and instructions to reset your password will be emailed to you:
Reset Password
Fill out the form below and reset your password: