HTML<div id="contenedorcubo"> <div class="cube"> <div class="face top"><img src="https://lh4.googleusercontent.com/-jZ4bK-AUgQM/VN8nHOE7UpI/AAAAAAABcaY/mLgFBqzupQk/s96-no/1.gif" alt="" width="100" height="100" /></div> <div class="face left"><img src="https://lh3.googleusercontent.com/-So71bObzxx4/VN81EN8An0I/AAAAAAABcbI/hN7z7qZfqns/s102-no/1.gif" alt="" width="100" height="100" /></div><div class="face demoright"><img src="https://lh4.googleusercontent.com/-J7NW24qWA34/VN8oqWUXPZI/AAAAAAABcas/kHt9v8sXUSk/w81-h71-no/2.gif" alt="" width="100" height="100" /></div> </div></div>

CSS<style>
  : 250px;height: 250px;position: relative;float:center;}      
      .cube {
 position:relative;
 top: 0px;
 left: 0px;
 }
 .face {
 position: absolute;
 width: 100px;
 height: 100px;
 overflow: hidden;
 font-family: monospace;
 font-size: 24px;
 }
 .top {
 top: 0;
 left: 89px;
 background: #fff;
 color: ;
 -webkit-transform: rotate(-45deg) skew(15deg, 15deg);
 -moz-transform: rotate(-45deg) skew(15deg, 15deg);
 }
 .left {
 top: 77px;
 left: 44px;
 background: #fff;
 color: ;
 -webkit-transform: rotate(15deg) skew(15deg, 15deg);
 -moz-transform: rotate(15deg) skew(15deg, 15deg);
 }
 .demoright {
 top: 77px;
 left: 133px;
 background: ;
 color: ;
 -webkit-transform: rotate(-15deg) skew(-15deg, -15deg);
 -moz-transform: rotate(-15deg) skew(-15deg, -15deg);
 }
 </style>