$(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 }); }); })
<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>
#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; }