¿Cómo rotar la imagen en relación con la posición del mouse?

Question

Estoy tratando de hacer este efecto: http://metatroid.com/articles en la parte superior de la página pero no puedo hacer que gire solo con el código que dieron.

var img = $('.image'); 
if(img.length > 0){ 
    var offset = img.offset(); 
    function mouse(evt){ 
     var center_x = (offset.left) + (img.width()/2); 
     var center_y = (offset.top) + (img.height()/2); 
     var mouse_x = evt.pageX; var mouse_y = evt.pageY; 
     var radians = Math.atan2(mouse_x - center_x, mouse_y - center_y); 
     var degree = (radians * (180/Math.PI) * -1) + 90; 
     img.css('-moz-transform', 'rotate('+degree+'deg)'); 
     img.css('-webkit-transform', 'rotate('+degree+'deg)'); 
     img.css('-o-transform', 'rotate('+degree+'deg)'); 
     img.css('-ms-transform', 'rotate('+degree+'deg)'); 
     } 
$(document).mousemove(mouse); 
} 

por lo que poner el código debajo de mi función de JavaScript y cambió mi clase de imagen para 'imagen' pero aún así no habría girar.

¿Hay alguna otra marca de jQuery o CSS asociada con este o cualquier consejo que pueda darme al para que funcione? Todavía soy algo nuevo en esto, así que cualquier ayuda es realmente apreciada. Gracias.

ACTUALIZACIÓN: me las arreglé para conseguir el efecto de rotación para trabajar, pero no sería girar sobre el eje derecho. Aquí está la url para lo que estoy trabajando: http://www.lifetime-watches.com/test/i_watches.html

¿Cómo muevo el eje/pivote para que funcione perfectamente?

Answer 1

El problema es que solo defines el mouse de función, y solo configuras el controlador de eventos, si img.length es> 0. El script se ubica en el encabezado y se ejecuta antes de que el cuerpo pueda cargarse, por lo que no hay imagen .

Fix - mueve la secuencia de comandos en el cuerpo del documento después de donde se define la imagen. Además, tu violín no incluye jQuery (mootools en su lugar). Una vez que arregles esas dos cosas, funcionará.