3D DOM Cube with rotation on mousevove

Example for the Stack Overflow thread: http://stackoverflow.com/questions/16941094/how-to-calculate-x-and-y-coordinates-of-a-rotated-3d-cube-in-javascript

HTML

<!-- Based on the nice tutorial by desandro:
          http://desandro.github.io/3dtransforms/docs/cube.html
!-->
<section class="container">
    <p>
        pitch = <span id="pitch">0</span>deg<br/>
        yawn = <span id="yawn">0</span>deg
    </p>
    <div id="cube">
        <figure class="front">1</figure>
        <figure class="back">2</figure>
        <figure class="right">3</figure>
        <figure class="left">4</figure>
        <figure class="top">5</figure>
        <figure class="bottom">6</figure>
    </div>
</section>

CSS

.container {
    width: 200px;
    height: 200px;
    position: relative;
    margin: 0 auto 40px;
    text-align: center;
    border: 1px dashed #CCC;
    -webkit-perspective: 1000px;
    -moz-perspective: 1000px;
    -o-perspective: 1000px;
    perspective: 1000px;
}

#cube {
    width: 100%;
    height: 100%;
    position: absolute;
    -webkit-transform-style: preserve-3d;
    -moz-transform-style: preserve-3d;
    -o-transform-style: preserve-3d;
    transform-style: preserve-3d;
    -webkit-transition: -webkit-transform 1s;
    -moz-transition: -moz-transform 1s;
    -o-transition: -o-transform 1s;
    transition: transform 1s;
}

#cube figure {
    display: block;
    position: absolute;
    width: 196px;
    height: 196px;
    border: 2px solid black;
    line-height: 196px;
    font-size: 120px;
    font-weight: bold;
    color: white;
    text-align: center;
}

#cube.panels-backface-invisible figure {
    -webkit-backface-visibility: hidden;
    -moz-backface-visibility: hidden;
    -o-backface-visibility: hidden;
    backface-visibility: hidden;
}

#cube .front  { background: hsla(   0, 100%, 50%, 0.7 ); }
#cube .back   { background: hsla(  60, 100%, 50%, 0.7 ); }
#cube .right  { background: hsla( 120, 100%, 50%, 0.7 ); }
#cube .left   { background: hsla( 180, 100%, 50%, 0.7 ); }
#cube .top    { background: hsla( 240, 100%, 50%, 0.7 ); }
#cube .bottom { background: hsla( 300, 100%, 50%, 0.7 ); }

#cube .front  { transform: rotateY(   0deg ) translateZ( 100px ); }
#cube .back   { transform: rotateX( 180deg ) translateZ( 100px ); }
#cube .right  { transform: rotateY(  90deg ) translateZ( 100px ); }
#cube .left   { transform: rotateY( -90deg ) translateZ( 100px ); }
#cube .top    { transform: rotateX(  90deg ) translateZ( 100px ); }
#cube .bottom { transform: rotateX( -90deg ) translateZ( 100px ); }

JavaScript

document.onmousemove = function (e) {
    var x = e.clientX - innerWidth/2,
        y = e.clientY - innerHeight/2,
        yawn = x / innerWidth * 180,
        pitch = -(y / innerHeight * 180);

    document.querySelector('#cube .front').style.transform = 'rotateX( '+ (0+pitch) +'deg ) rotateY( '+ (0+yawn) +'deg ) translateZ( 100px )';
    document.querySelector('#cube .back').style.transform = 'rotateX( '+ (180+pitch) +'deg ) rotateY( '+ (0-yawn) +'deg ) translateZ( 100px )';
    document.querySelector('#cube .right').style.transform = 'rotateX( '+ (0+pitch) +'deg ) rotateY( '+ (90+yawn) +'deg ) translateZ( 100px )';
    document.querySelector('#cube .left').style.transform = 'rotateX( '+ (0+pitch) +'deg ) rotateY( '+ (-90+yawn) +'deg ) translateZ( 100px )';
    document.querySelector('#cube .top').style.transform = 'rotateX( '+ (90+pitch) +'deg ) rotateZ( '+ (0-yawn) +'deg ) translateZ( 100px )';
    document.querySelector('#cube .bottom').style.transform = 'rotateX( '+ (-90+pitch) +'deg ) rotateZ( '+ (0+yawn) +'deg ) translateZ( 100px )';
    
    document.getElementById('pitch').innerHTML = (pitch*100+.5|0) / 100;
    document.getElementById('yawn').innerHTML = (yawn*100+.5|0) / 100;
};