使用jQuery根据光标位置旋转元素

我想要做的是一个jQuery脚本,它旋转div中的元素,具体取决于浏览器窗口中的光标位置.

比例如下：

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

和y轴相同.

如果光标位于屏幕的中心,则不旋转.如果它在其他地方,它必须从0°旋转到2°(或负值,取决于相对笛卡尔平面中屏幕的位置).所以这是一个动态轮换,立即反馈.

就像你在这里看到的：http://css3playground.com/flashlight.php(从菜单“斜面”中选择),但使用transform：rotate而不是text-shadow.

现在我尝试使用transit.js,使用sin e cos而不是degree(将导致从0到1的“度”).我知道,这不是正确的方法,但它是我想象的最接近度数的方法.

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 });
});

但结果并不是我的预期. div旋转(以错误的方式旋转,但旋转),但不是动态的.

我该怎么办？

小提琴：http://jsfiddle.net/lucgenti/LtWtW/11/

经过我们双方的一些工作, here is a new version
不使用插件,前缀免费.注意：这仅适用于支持CSS转换的浏览器

这是我用来实现这种行为的jQuery

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