JSFiddle - React, Tailwind, and code Playground

by matthewbj

HTML

<img src="http://6c6adda334d1c1bc1ec3-377b1c418e2291c760fd22323ae102bf.r55.cf2.rackcdn.com/img/site-graphic-1.png" class="image">

JavaScript

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 * (18 / Math.PI) * -1) ;
        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);
}