<div style="position: absolute; top: 50%; left:50%; margin-left: -350px; margin-top: -233px;
-webkit-perspective: 1000;" >
<div id="picture" style="height: 466px;
width: 699px;
-webkit-transform-style: preserve-3d;
background: url('flowers.png') no-repeat;
">
<div style="width: 377px;
height: 424px; background: url('body.png') no-repeat;
position: absolute;
-webkit-transform: translateZ(20px);
top: 45px; left: 75px;">
</div>
<div style="position: absolute;
-webkit-transform: translateZ(30px);
bottom: 0px; right: 0px; padding-left: 30px; padding-right: 30px;
background: rgba(0,0,0,0.6); font-family: 'Lobster', arial, serif;
color: #FFF; font-size: 30px; line-height: 60px; text-align:center;">
Francy taking pictures
</div>
</div>
</div>
<!-- JS -->
$(document).ready(function() {
$('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);
$('#picture').css('-webkit-transform','rotate3d(' + tiltx + ', ' + tilty + ', 0, ' + degree + 'deg)');
});
});
Be the first to comment
You can use [html][/html], [css][/css], [php][/php] and more to embed the code. Urls are automatically hyperlinked. Line breaks and paragraphs are automatically generated.