CodePen

HTML

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

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

JS

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