Rotating an element based on cursor position in a separate element

Question

I\'ve been Working on a breadcrumbs directory feature recently that requires an element to rotate based on the cursor x position within the breadcrumbs container element. Lo

Answer 1

Hiya from @brenjt's :) response above pasting this as answer post & here is a sample demo http://jsfiddle.net/JqBZb/

Thanks and further helpful link here: jQuery resize to aspect ratio & here How to resize images proportionally / keeping the aspect ratio?

Please let me know if I missed anything! Hope this helps! have a nice one, Cheers!

jquery code

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

​