CSS3 Translate3d -Z Value Bug Fix

by Christian Bonato

HTML

<div id="stage">
    <div id="debug"></div>
    <div id="gimble">
        <div id="a" class="block"></div>
        <div id="b" class="block"></div>
        <div id="c" class="block"></div>
        <div id="d" class="block"></div>
        <div id="e" class="block"></div>
    </div>
</div>

CSS

#stage {
    -webkit-transform-origin: center center;
    -webkit-transform-style: preserve-3d;
    -webkit-perspective: 500px;
    position: absolute;
    top: 0;
    left: 0;
    height: 300px;
    width: 300px;
    display: block;
    border: 1px dotted #CCC;
}
#debug {
    position: absolute;
    top: 0;
    left: 0;
}
#gimble {
    -webkit-transform-style: preserve-3d;
    position: absolute;
    top: 0;
    left: 0;
    height: 300px;
    width: 300px;
    position: relative;
    display: block;
    border: 1px solid #EEE;
}

.block {
    -webkit-transform-style: preserve-3d;
    position: absolute;
    top: 0;
    left: 0;
    display: block;
    opacity: .25;
    border: 1px solid #F00;
    height: 100px;
    width: 100px;
    text-align: right;
    color: #FFF;
    font-weight: 200;
    font-family: 'Helvetica Neue', Helvetica, Arial, Sans-Serif;
}

#a.block {
    background: #900;
    top: 50px;
    left: 50px;
    -webkit-transform: translate3d(0px,0px,50px);
}
#b.block {
    background: #090;
    top: 75px;
    left: 75px;
    -webkit-transform: translate3d(0px,0px,25px);
}
#c.block {
    background: #009;
    top: 100px;
    left: 100px;
    -webkit-transform: translate3d(0px,0px,0px);
}
#d.block {
    background: #990;
    top: 125px;
    left: 125px;
    -webkit-transform: translate3d(0px,0px,-25px);
}
#e.block {
    background: #099;
    top: 150px;
    left: 150px;
    -webkit-transform: translate3d(0px,0px,-50px);
}

.block:hover {
    background: #999 !important;
}

JavaScript

$(document).ready(function(){
       
    $('.block').mouseenter(function(){
        $('#debug').text('hovering over: #' + $(this).attr('id') + '.block');   
    });
    $('.block').mouseleave(function(){
        $('#debug').text('');       
    });
       

    $('#gimble').mousemove(function(ev){
        var x = ev.pageX - $('#stage').position().left;
        var y = ev.pageY - $('#stage').position().top;
        var dx = $('#stage').innerWidth()/2 - x;
        var dy = $('#stage').innerHeight()/2 - y;
        var dxp = dx/($('#stage').innerWidth()/2);
        var dyp = dy/($('#stage').innerHeight()/2);
        
        var newTransformRotateXY = "rotateY(" + 10*Math.tan(dxp) + "deg) rotateX(" + -10*Math.tan(dyp) + "deg)";
        
        $('#gimble').css({
            '-webkit-transform': newTransformRotateXY
        });
    });
})