CodePen

HTML

            
              <div>CSS 3D Transforms: Demo 3</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 */
.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;
   
    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);

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

JS

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