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

Question

我想要制作一个 jQuery 脚本，根据浏览器窗口中的光标位置旋转 div 内的元素。

比例是这样的:

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

y 轴也是如此。

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

就像您在这里看到的那样:http://css3playground.com/flashlight.php (从菜单“Bevel”中选择)但使用 transform:rotate 而不是 text-shadow。

现在我尝试使用transit.js，使用sin e 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 旋转(以错误的方式，但旋转)，但不是动态旋转。

我该怎么办？

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

Answer 1

经过我们俩的一番努力，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');
    });
});