JSFiddle - React, Tailwind, and code Playground

by Gabriele Petrioli

HTML

<img src="http://wwwcdn.net/ev/assets/images/vectors/afbig/a2c3aab4fdc3565bf4cc8807bc6775ac-pointing-finger-clip-art.jpg" id="pointer" />

CSS

html,body{
    padding:0;
    margin:0;
    width:100%;
    height:100%;
}

JavaScript

function diff(x, y) {
    var centerItem = $('#pointer'),
        centerLoc = centerItem.offset();
    var dx = x - (centerLoc.left + (centerItem.width() / 2));
        dy = y - (centerLoc.top + (centerItem.height() / 2));
    return Math.atan2(dy, dx) * (180 / Math.PI);
}


$('body').mousemove(function(e){
    var x = e.pageX;
    var y = e.pageY;

    var myAngle = diff(x, y);
    var rotationValue = 'rotate(' + myAngle + 'deg)';
    $("#pointer").css({
        '-moz-transform': rotationValue,
        '-webkit-transform': rotationValue,
        '-o-transform': rotationValue,
        '-ms-transform': rotationValue,
        'transform': rotationValue
    });
});