JSFiddle - React, Tailwind, and code Playground

HTML

<div class="bg"></div>
<div class="debug" id="debug1"></div>

CSS

p {
   font-weight: bold;
   font-family: monospace;
   padding: 10px;
}
.bg {
    height: 97px;
    width: 96px;
    margin: 10px;
    background-color: gray;
    margin: 0 auto;
    margin-top: 50px;    
    background: url(http://re.e100.vizz.pl/images/compas.png);
}

.debug {
    margin: 20px;
    padding-top: 10px;
    width: 300px;
    border-top: 1px solid red;
}

JavaScript

var offset = $('.bg').offset();
var mouse = [];

$("html").mousemove(function(event) {
  mouse = [event.pageX, event.pageY];
    
    $('.bg').css( 'transform', 'rotate(' + (mouse[0] - offset.left) + 'deg)');
    $('.bg').css( '-moz-transform', 'rotate(' + (mouse[0] - offset.left) + 'deg)');
    $('.bg').css( '-o-transform', 'rotate(' + (mouse[0] - offset.left) + 'deg)');
    $('.bg').css( '-webkit-transform', 'rotate(' + (mouse[0] - offset.left) + 'deg)');
    $('.bg').css( 'transform', 'rotate(' + (mouse[0] - offset.left) + 'deg)');
    
    $('#debug1').html("Now: x=" + (mouse[0] - offset.left) + "; y=" + (mouse[1] - offset.top));
});