Animation d'un cube en 3D

HTML

<div id="cube">
    <div id="top"   ></div>
    <div id="bottom"></div>
    <div id="front" ></div>
    <div id="back"  ></div>
    <div id="left"  ></div>
    <div id="right" ></div>
</div>

CSS

body
{
    overflow: hidden;
}
#cube
{
    -webkit-transform-style: preserve-3d;
       -moz-transform-style: preserve-3d;
        -ms-transform-style: preserve-3d;
         -o-transform-style: preserve-3d;
            transform-style: preserve-3d;

    width:  600px;
    height: 600px;

    position: absolute;
    left: 50%;
    top:  50%;
    margin-left: -300px;
    margin-top:  -300px;
}

#cube div
{
    width:  200px;
    height: 200px;
    opacity: 0.5;
    position: absolute;
    left: 50%;
    top:  50%;
    margin-left: -100px;
    margin-top:  -100px;
    
    -webkit-backface-visibility: hidden;
       -moz-backface-visibility: hidden;
        -ms-backface-visibility: hidden;
         -o-backface-visibility: hidden;
            backface-visibility: hidden;
    
    -webkit-transition: all 500ms;
       -moz-transition: all 500ms;
        -ms-transition: all 500ms;
         -o-transition: all 500ms;
            transition: all 500ms;
}


#top
{
    background-color: red;
}
#bottom
{
    background-color: green;
}
#front
{
    background-color: blue;
}
#back
{
    background-color: yellow;
}
#left
{
    background-color: orange;
}
#right
{
    background-color: pink;
}


#top
{
    -webkit-transform: rotateX( 90deg) translateZ(100px);
       -moz-transform: rotateX( 90deg) translateZ(100px);
        -ms-transform: rotateX( 90deg) translateZ(100px);
         -o-transform: rotateX( 90deg) translateZ(100px);
            transform: rotateX( 90deg) translateZ(100px);
}
#bottom
{
    -webkit-transform: rotateX(-90deg) translateZ(100px);
       -moz-transform: rotateX(-90deg) translateZ(100px);
        -ms-transform: rotateX(-90deg) translateZ(100px);
         -o-transform: rotateX(-90deg) translateZ(100px);
            transform: rotateX(-90deg) translateZ(100px);
}
#front
{
    -webkit-transform: rotateX(  0deg) translateZ(100px);
       -moz-transform: rotateX(  0deg) translateZ(100px);
        -ms-transform: rotateX(  0deg) translateZ(100px);
        ...

JavaScript

function prefix(element, propriete, valeur){
    
    var pre = ['-webkit-',
               '-moz-',
               '-ms-',
               '-o-',
               ''];
                    
    for(var i = 0 ; i < pre.length ; i++){
        element.css(pre[i] + propriete, valeur);    
    }
};

function f(x, a, b){
    return (a * x) + b;
};

function animate(selector){
    
    var angleMax = 360, 
        
        hScreen   = jQuery(window).height(),
        wScreen   = jQuery(window).width(),
        
        a = (angleMax *  2) / hScreen,
        b = (angleMax *  2) / wScreen,
        c = (angleMax * -1);
    
    jQuery(document).on('mousemove', function(event){
    
        var x = event.pageX,
            y = event.pageY;
            
        prefix(jQuery(selector),
               'transform',
               'rotateX('+ -f(y, a, c) +'deg)' + ' ' +
               'rotateY('+  f(x, b, c) +'deg)')
    });
};

animate('#cube');