CSS 3 : Cube Rotation

HTML

<div class="canvas">
    <div class="cube">
        <div class="f1"></div>
        <div class="f2"></div>
        <div class="f3"></div>
        <div class="f4"></div>
        <div class="f5"></div>
        <div class="f6"></div>
    </div>
</div>

CSS

body, .canvas { width:100%; height:100%; }
.cube { position:fixed; width:200px; height:200px; top:30%; left:40%; -moz-transform-style:preserve-3d; -webkit-transform-style:preserve-3d; }
.cube div { width:200px; height:200px; position:absolute; -moz-perspective:600px; -webkit-perspective:600px; }
.f1 { 
    background-color:rgba(255,0,0,.25); 
    -moz-transform:rotateX(90deg); 
    -moz-transform-origin:center bottom; 
    -webkit-transform:rotateX(90deg);
    -webkit-transform-origin:center bottom; 
}
.f2 { 
    background-color:rgba(0,255,0,.25); 
    -moz-transform:rotateY(90deg); 
    -moz-transform-origin:left center; 
    -webkit-transform:rotateY(90deg);
    -webkit-transform-origin:left center; 
}
.f3 { 
    background-color:rgba(0,0,255,.25); 
    -moz-transform:rotateY(-90deg); 
    -moz-transform-origin:right center;
    -webkit-transform:rotateY(-90deg);
    -webkit-transform-origin:right center;
}
.f4 { 
    background-color:rgba(255,255,0,.25); 
    -moz-transform:rotateX(-90deg); 
    -moz-transform-origin:center top; 
    -webkit-transform:rotateX(-90deg);
    -webkit-transform-origin:center top; 
}
.f5 { 
    background-color:rgba(255,0,255,.25); 
    -moz-transform:translateZ(-200px); 
    -webkit-transform:translateZ(-200px); 
}
.f6 { 
    background-color:rgba(0,255,255,.25); 
}

body:hover .cube {  
    -moz-animation: cuberotate 10s infinite linear;
    -webkit-animation: cuberotate 10s infinite linear;
}

@-moz-keyframes cuberotate {    
    100% { -moz-transform:perspective(800px) rotateX(1080deg) rotateY(720deg); }
}
@-webkit-keyframes cuberotate {   
    100% { -webkit-transform:perspective(1500px) rotateX(1080deg) rotateY(720deg); }
}