Jquery – Image following mouse on a pivot/axel

[Curtis Thompson]

hello…

like this?

https://metatroid.com/articles/CSS3%20transforms%20-%20rotate%20image%20with%20mouse

you’d just have to make your compass bg and then do an overlay of some sort of arrow image and then rotate that like that example, i’d think…

sitruc

[Letizia Margo]

Yes! That’s it!! Thanks for your help 😀

[Letizia Margo]

I tried following the instructions in that link but it wouldn’t rotate… Did I do it wrong? Is there anything else I should be adding in the code other than this? I added a link to jquery just in case but it still wouldn’t work.

$(document).ready(function() {

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

Thank you.