Rotating elements according to cursor position with jQuery

Question

What I'm trying to make is a jQuery script that rotate the elements inside a div, depending on the cursor position in the browser window.

The proportion is something like:

maximum_pixels_x-axys : 2° = center_pixels_x-axys : 0°

and the same for y axis.

If the cursor is at the center of the screen, no rotation. If it's somewhere else, it must be rotated from 0° to 2° (or negative values depending on the position of the screen in a relative Cartesian plane). So it's a dynamic rotation with immediate feedback.

Like what you see here: http://css3playground.com/flashlight.php (select from menu "Bevel") but using transform:rotate instead of text-shadow.

Now I tried that with transit.js, using sin e cos instead of degree ("degree" from 0 to 1 will result). It's not the correct way, I know, but it's the closest method I imagined to obtain a low value for degrees.

var max_x = $(window).width();
var max_y = $(window).height();
var center_x = (max_x/2);
var center_y = (max_y/2);

$(document).mousemove(function(e) {
    var mouse_x = e.pageX,
    mouse_y = e.pageY,
    hypotenuse = Math.sqrt(Math.pow((mouse_x-center_x),2)+Math.pow((mouse_y-center_y), 2)),
    cos = (mouse_x-center_x)/hypotenuse,
    sin = (mouse_y-center_y)/hypotenuse;
    $('#div1, #div2').transition({ perspective: '400px', rotateX: sin, rotateY: cos });
});

But the results are not what I expected. The divs rotate (in the wrong way, but rotate), but not dynamically.

What do I do?

Fiddle: http://jsfiddle.net/lucgenti/LtWtW/11/

Answer 1

After some work by both of us, here is a new version that doesn't use a plugin and is prefix free. NOTE: This only works in browsers that support CSS transforms

Here is the jQuery I used to achieve such behavior

$(document).ready(function () {
    var $one = $('#div1'),
        $two = $('#div2'),
        browserPrefix = "",
        usrAg = navigator.userAgent;
    if(usrAg.indexOf("Chrome") > -1 || usrAg.indexOf("Safari") > -1) {
        browserPrefix = "-webkit-";
    } else if (usrAg.indexOf("Opera") > -1) {
        browserPrefix = "-o";
    } else if (usrAg.indexOf("Firefox") > -1) {
        browserPrefix = "-moz-";
    } else if (usrAg.indexOf("MSIE") > -1) {
        browserPrefix = "-ms-";
    }

    $(document).mousemove(function (event) {
        var cx = Math.ceil(window.innerWidth / 2.0),
            cy = Math.ceil(window.innerHeight / 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 * 15);

            shadx = degree*tiltx;   /*horizontal shadow*/
            shady = degree*tilty;   /*vertical shadow*/

        $one.css(browserPrefix + 'transform', 'rotate3d(' + tiltx + ', ' + tilty + ', 0, ' + degree + 'deg)');
        $two.css(browserPrefix + 'transform', 'rotate3d(' + tiltx + ', ' + tilty + ', 0, ' + degree + 'deg)');

        if(dx>cx) /*without that horizontal values are reversed*/
            $('#div1, #div2').css('box-shadow', + (-shady) + 'px ' + (-shadx) +'px 5px #3D352A');
        else $('#div1, #div2').css('box-shadow', + shady + 'px ' + (-shadx) +'px 5px #3D352A');
    });
});