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

我要做的是一个jQuery脚本，它根据浏览器窗口中光标的位置旋转div中的元素

这个比例是这样的：

最大像素x轴：2°=中心像素x轴：0°

y轴也是如此

如果光标位于屏幕中心，则不旋转。如果在其他地方，则必须将其从0°旋转到2°或负值，具体取决于屏幕在相对笛卡尔平面中的位置。这是一个动态的旋转，有即时的反馈

就像您在这里看到的：从菜单中选择倒角，但使用“变换：旋转”而不是“文本阴影”

现在，我尝试使用transit.js，使用sine cos代替从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以错误的方式旋转，但旋转，但不是动态旋转

我该怎么办

---

小提琴：

经过我们两人的努力， 它不使用插件，并且没有前缀。注意：这只适用于支持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');
    });
});

---

添加了小提琴链接。我不知道为什么它不起作用，因为在我的本地文件夹中，正如我所说，它的工作方式是错误的；最后。第二，如何导入transit.js？fiddle根本没有导入它，你能把它的实现复制到fiddle上吗？如果你把sin和cos的值乘以30，使它们变得更极端，你可以看到浏览器超载，导致fiddle被修正。通过左侧菜单上的外部资源加载传输。你认为这就是为什么它太重的原因？现在我尝试简单的css操作。在这里我设置了一个间隔，它每秒钟只检查一次。看起来。转换只是使processor@lucgenti如果我们能根据光标的位置在它们身上产生阴影效果那就太棒了。。。我会在未来一两周内调查此事，如果我发现任何我有同样想法的事情，我会告诉你。我已经试过了，但不好。我将在这里更新我所得到的。@lucgenti我认为盒子阴影将是我们最好的选择。你可以看到每个变量是如何受到影响的，我们只需要找出前两个变量是如何根据角度变化的，并将其与我们已经拥有的程度相关联。啊，对不起。将所有符号+/-更改为shadx和shady即可@shubniggurath没有好办法让它不带前缀，但我用一个更合适的解决方案更新了我的答案，使用浏览器检测bug，如果我记得的话，我会在几天后回家时修复它