How to rotate the image relative to the position of the mouse?

Question

I am trying to make this effect: http://metatroid.com/articles at the top of the page, but I can’t make it rotate with just the code they gave.

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

So, I put this code under my javascript function and changed my image class to “image”, but it still doesn't rotate.

Is there any other jquery or css markup related to this or any advice you can give me to make this work? I'm still new to this, so any help is really appreciated. Thanks.

UPDATE : I managed to get the spinning effect to work, but it doesn't spin on the right axis. Here's the url for what I'm working on: http://www.lifetime-watches.com/test/i_watches.html

How to move the axis / rotation so that it works perfectly?

Answer 1

The problem is that you define only the mouse function and install only the event handler if img.length → 0. the script is in the head and executed before the body can load, so there is no image.

Fix - move the script to the document body after the image is defined. In addition, your violin does not include jQuery (instead of mootools). Once you fix these two things, it will work.