Diego's Parallax - Test 1

dabblet.css

/**
 * Diego's Parallax - Test 1
 */

body {
	background: #222;
}
#container {
	position: absolute; 
	top: 50%; 
	left:50%; 
	margin-left: -350px;
	margin-top: -233px; 
	-webkit-perspective: 1000;
}
#fondo {
	height: 480px; 
	width: 800px;
	background: url('http://diegoepunan.com/themes/diego4/fondo.jpg') center top no-repeat;
	-webkit-transform-style: preserve-3d;
	transition: all 0.3s ease-in-out; 
}
body:hover #fondo {
	-webkit-transform: translateZ(-30px); 

}
#foto {
	position: absolute; 
	top: 45px; 
	left: 30%;
	width: 250px; 
	height: 440px; 
	background: url('http://diegoepunan.com/themes/diego4/diego.png') no-repeat; 
	-webkit-transform: translateZ(90px); 
	transition: all 0.3s ease-in-out; 
	-webkit-box-reflect: below 0 -webkit-gradient(linear, left top, left bottom, from(transparent), color-stop(50%, transparent), to(rgba(255,255,255,0.2)));
}
body:hover #foto {
	-webkit-transform: translateZ(190px); 

}
			

dabblet.html

<div id="container">
		<div id="fondo">
        	<div id="foto"></div>
		</div>
	</div>
    
	<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script> 
	<script>
		$('body').mousemove(function(event) {
	        cx = Math.ceil($('body').width() / 2.0);
	        cy = Math.ceil($('body').height() / 2.0);
	        dx = event.pageX - cx;
	        dy = event.pageY - cy;
	        tiltx = (dy / cy);
	        tilty = - (dx / cx);
	        radius = Math.sqrt(Math.pow(tiltx,2) + Math.pow(tilty,2));
	        degree = (radius * 20);

	        $('#fondo').css('-webkit-transform','rotate3d(' + tiltx + ', ' + tilty + ', 0, ' + degree + 'deg)');

	    });
	</script>

settings.json

{"view":"split-vertical","prefixfree":"1","page":"result"}