Efeito Perpectiva

by iguimaraes

HTML

<img id="picture" src="http://portaldodog.com.br/cachorros/wp-content/uploads/2015/06/curiosidades-cachorros-10.jpg" style="height: 300px; width: 300px; margin-top: 30px; margin-left:calc(50% - 150px);">

JavaScript

$(document).ready(function() {
    $(document).mousemove(function(event) {
        
        cx = Math.ceil($(window).width() / 2.0);
        cy = Math.ceil($(window).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)');
        $('#picture').css('transform','rotate3d(' + tiltx + ', ' + tilty + ', 0, ' + degree + 'deg)');
        
    });
});