Rotating 3D CSS cube

Pure CSS 3D cube rotating animation

HTML

<div class="cube box1 rotateRound">
    <div class="pane1"></div>
    <div class="pane2"></div>
    <div class="pane3"></div>
    <div class="pane4"></div>
    <div class="pane5"></div>
    <div class="pane6"></div>
</div>

<h1>Hover the cube!</h1>

CSS

body {
    font-family: arial;
}
.cube div {
    width: 150px;
    height: 150px; 
    -moz-transition: all 400ms ease;  
    position: absolute; 
}
.box1 div { left: 50%; top: 40%; margin-top: -100px; margin-left: -100px; }

.pane1 {
     background: url(http://img.dreamdealer.nl/dd/crate_side.png);   
     background-size: 100%;
     -moz-transform: scaley(.49) rotate(50deg);
     z-index: 6;
}
.pane2 {
     background: #AAA;  
     -moz-transform: translate(-38%, 65.5%) scalex(.65) skew(0deg, 21deg);
     z-index: 5;
}
.pane3 {
     background: #DDD;   
     -moz-transform: translate(32%, 68%) scalex(.77) skew(0deg, -17.5deg);
     z-index: 4;
}
.pane4 {  
     background: #CCC; 
     -moz-transform: translate(38%, 34%) scalex(.65) skew(0deg, 21deg);
     z-index: 3;
}
.pane5 {   
     background: #BBB; 
     -moz-transform: translate(-32%, 31%) scalex(.77) skew(0deg, -17.5deg);
     z-index: 2;
}
.pane6 { 
     background: #DDD; 
     -moz-transform: translate(0%, 100%) scaley(.49) rotate(50deg);
     z-index: 1;
}

@-moz-keyframes rotatePane1 {
        
}

.rotateRound:hover .pane1 {
    -moz-animation-duration: 2s;
    -moz-animation-iteration-count: 1;
    -moz-animation-name: rotateRound;  
    -moz-animation-timing-function: linear; 
    -moz-animation-direction: normal;
    -moz-animation-fill-mode: normal;
}

@-moz-keyframes rotateRound {
    0%   { -moz-transform: scaley(.49) rotate(50deg); }
    25%  { -moz-transform: scaley(.49) rotate(140deg); }
    50%  { -moz-transform: scaley(.49) rotate(230deg); }
    75%  { -moz-transform: scaley(.49) rotate(320deg); }
    100% { -moz-transform: scaley(.49) rotate(50deg); top: 30%; }
}

.rotateLeft:hover .pane1 { -moz-transform: scaley(.495) rotate(75deg); }
.rotateLeft:hover .pane2 { -moz-transform: translate(-48%, 56%) scalex(.25) skew(0deg, 25deg); }
.rotateLeft:hover .pane3 { -moz-transform: translate(13%, 73.5%) scalex(.98) skew(0deg, -7.5deg); }
.rotateLeft:hover .pane4 { -moz-transform: translate(49%,...