CodePen

HTML

            
              <div>CSS 3D Transforms: Animation Final</div>
<!--   -->

<div class="cube">

    <div class="face" id="top"></div>

   <div class="face" id="front"></div>

    <div class="face" id="right"></div>

    <div class="face" id="left"></div>

    <div class="face" id="back"></div>

    <div class="face" id="bottom"></div>

</div>​
            
          
!

↑ Insert the most common viewport meta tag

CSS

            
              /*  -prefix-free */
/* Please note that the transform, transform-style and animation properties currently only work with vendor-prefixes (-moz-, -webkit- etc.).  

Here we are using Prefix-free http://leaverou.github.io/prefixfree */

.cube,

.cube div.face {

    width: 200px;

    height:200px;

}

.cube {

    margin:100px auto; /* moves the cube to the middle of the page */

}

.cube div.face {

    position: absolute;

}


.cube div#front {

   background-color: red;

}

  .cube div#back {

   background-color: green;

}

  .cube div#right {

    background-color: blue;

}

  .cube div#left {

    background-color: yellow;

}

  .cube div#top {

    background-color: orange;

}

  .cube div#bottom {

    background-color: fuchsia;

}

 

.cube {

    margin:100px auto; /* moves the cube to the middle of the page */

    transform-style: preserve-3d;
   
}

.cube {
  
    transform: perspective(700px) rotateX(-30deg) rotateY(-30deg);
    
}

.cube div#right {
    
  transform: rotateY(90deg) translateZ(100px);

}


.cube div#front {

  transform: translateZ(100px);

}

.cube div#back {

  transform: translateZ(-100px);
   
}

.cube div#right {

    transform: rotateY(90deg) translateZ(100px);
   
}

.cube div#left {

     transform: rotateY(-90deg) translateZ(100px);

}

.cube div#top {

    transform: rotateX(90deg) translateZ(100px);
    
}

.cube div#bottom {

    transform: rotateX(-90deg) translateZ(100px);
  
}


/* ANIMATION */

   .cube {
     
      animation: rotate    2s infinite linear;
    }

   
    @keyframes rotate {
        0% { transform: rotateX(   0deg ) rotateY(   0deg ); }
      100% { transform: rotateX( -360deg ) rotateY( 360deg ); }
    }





            
          
!
? ?
? ?
Must be a valid URL.
+ add another resource
via CSS Lint

JS

            
              
            
          
!
Must be a valid URL.
+ add another resource
via JS Hint
Loading ..................