rotating cube

_logo.haml.html

.logo_container
  #cube.default
    .figure.front
    .figure.back
    .figure.right
    .figure.left
    .figure.top
    .figure.bottom

_logo.scss

.logo_container {
  width: 20px;
  height: 20px;  position: relative;
  position:absolute;
  margin-left:120px;
  -webkit-perspective: 400;
  .front{ background: url(/images/logo/content_background_yellow.png); } 
  .back{ background: url(/images/logo/content_background_dark_blue.png); } 
  .right{ background: url(/images/logo/content_background_orange_yellow.png); } 
  .left{ background: url(/images/logo/content_background_pink.png); } 
  .top{ background: url(/images/logo/content_background_lite_blue.png); } 
  .bottom{ background: url(/images/logo/content_background_orange.png); } 
  #cube { 
    width: 24px;
    height: 24px;
    position: absolute;
    -webkit-transform-style: preserve-3d;
    .figure {
      width: 24px; 
      height: 24px; 
      display: block;
      position: absolute;
      color:#FFF;
    }
    -webkit-transform: translateZ( 1000px );
    .front  {
      -webkit-transform: rotateY(   0deg ) translateZ( 12px );
      box-shadow: 2px 2px 2px white;
    }
    .back   {   
      -webkit-transform: rotateX( 180deg ) translateZ( 12px );
      box-shadow: -2px -2px 2px white;
    }
    .right  {
      -webkit-transform: rotateY(  90deg ) translateZ( 12px );
      box-shadow: -1px 1px 2px white;
    }
    .left   {   
      -webkit-transform: rotateY( -90deg ) translateZ( 12px );
      box-shadow: -2px 2px 2px white;
    }
    .top    {   
      -webkit-transform: rotateX(  90deg ) translateZ( 12px );
      box-shadow: 1px 2px 2px white;
    }
    .bottom { -webkit-transform: rotateX( -90deg ) translateZ( 12px ); }
  }
  #cube.default { 
    -webkit-transform: rotateY( 15deg ) rotateX( -45deg ) rotateZ( 15deg );
  }
  #cube.show-front  { -webkit-transform: translateZ( -12px ) rotateY(    45deg ); } 
  #cube.show-back   { -webkit-transform: translateZ( -100px ) rotateX( -180deg ); } 
  #cube.show-right  { -webkit-transform: translateZ( -100px ) rotateY(  -90deg ); } 
  #cube.show-left   { -webkit-transform: translateZ( -100px ) rotateY(   90deg ); } 
  #cube.show-top    { -webkit-transform: translateZ( -100px ) rotateX(  -90deg ); } 
  #cube.show-bottom { -webkit-transform: translateZ( -100px ) rotateX(   90deg ); } 

  #cube { -webkit-transition: -webkit-transform 4s; } 
}