<div id="wrapper">
  <div class="cube">
    <!--Front-->
    <div></div>
    <!--Back-->
    <div></div>
    <!--Left-->
    <div></div>
    <!--Right-->
    <div></div>
    <!--Top-->
    <div></div>
    <!--Bottom-->
    <div></div>
  </div>
</div>

body{
  background:#f5f5f5;
}

#wrapper{
  width:300px;
  height:300px;
  perspective:700px;
  -webkit-perspective:700px;
  margin:100px auto;
}

.cube{
  position:relative;
  width:150px;
  height:150px;
  transform-style:preserve-3d;
  transform:rotateY(35deg) rotatex(-38deg);
  transition:300ms ease-in;
}

.cube:hover{
   transform:rotateX(125deg) rotateY(155deg);
}

.cube div{
  position:absolute;
  width:150px;
  height:150px;
  background:rgba(0,0,0,0.1);
}

.cube div:nth-child(1){
  transform:translateZ(75px);
  background:#237A57;
}

.cube div:nth-child(2){
  transform: rotateX(180deg) translateZ(75px);
  background:#005AA7;
}

.cube div:nth-child(3){
  transform: rotateY(-90deg) translateZ(75px);
  background:#DA4453;
}

.cube div:nth-child(4){
  transform:rotateY(90deg) translateZ(75px);
  background:#a8c0ff;
}

.cube div:nth-child(5){
  transform: rotateX(90deg) translateZ(75px);
  background:#fc4a1a;
}

.cube div:nth-child(6){
  transform:rotateX(-90deg) translateZ(75px);
  background:#f7b733;
}