Вращающиеся элементы в соответствии с позицией курсора с jQuery

Question

Что я пытаюсь сделать, это скрипт jQuery, который вращает элементы внутри div, в зависимости от положения курсора в окне браузера.

Соотношение что-то вроде:

maximum_pixels_x-Axys: 2 ° = center_pixels_x-AXYS: 0 °

и то же самое для оси у.

Если курсор находится в центре экрана, нет поворота. Если он находится где-то в другом месте, он должен быть повернут с 0 ° до 2 ° (или отрицательные значения в зависимости от положения экрана в относительной картезианской плоскости). Таким образом, это динамическое вращение с немедленной обратной связью.

Нравится то, что вы видите на рисунке: http://css3playground.com/flashlight.php (выберите из списка "Bevel"), но используя transform:rotate вместо text-shadow.

Теперь я пробовал это с транзитом.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 }); 
}); 

Но результаты не то, что я ожидал. Дивы вращаются (неверно, но вращаются), но не динамически.

Что мне делать?

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