Rotating 3D CSS cube

Pure CSS 3D cube rotating animation

by dreamdealer

HTML

<div class="pane1"></div>
<div class="pane2"></div>


<h1>Hover the cube!</h1>

CSS

body {
    font-family: arial;
}
.pane1, .pane2 {
    width: 150px;
    height: 150px;  
    position: absolute; 
}
.pane1 { left: 50px; top: 100px; }
.pane2 { left: 250px; top: 50px; }

.pane1, .pane2 {
     background: url(http://img.dreamdealer.nl/dd/crate_side.png);   
     background-size: 100%;
     z-index: 6;
     -moz-transform:scaley(.49) rotate(50deg);
}

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

@-moz-keyframes rotateRound {
    0%   { -moz-transform:scaley(.49) rotate(50deg); }
    50%  { -moz-transform:scaley(.49) rotate(230deg); }
    100% { -moz-transform:scaley(.49) rotate(410deg); }
}
@-moz-keyframes dontTransform {
    0%   { top: 100px; }
    100% { top: 50px; }
}