CodePen

HTML

            
              <div>CSS 3D Transforms: Demo 2</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>​
            
          
!
via HTML Inspector

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);
    

}

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

JS

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