JSFiddle - React, Tailwind, and code Playground

HTML

<div id='log' style="position:fixed;right:0;top:0;"></div> 
<br /><br /><br /><br /><br />
<br /><br /><br /><br /><br />
<br /><br /><br /><br /><br />
<div style="
-ms-transform:skew(30deg, 30deg);
-moz-transform:skew(30deg, 30deg);
-webkit-transform:skew(30deg, 30deg);
-o-transform:skew(30deg, 30deg);
">
<div type="image" id="clickMe" style="border:10px solid silver;
padding: 0px;
-ms-transform:rotate(20deg);
-moz-transform:rotate(20deg);
-webkit-transform:rotate(20deg);
-o-transform:rotate(20deg);
position:relative;
width:100px;
height:50px;" >test</div>
</div>

JavaScript

function offsetXY(event, element) {
  function coords(element) {
    var div = document.createElement('div'),
        e = [], i;
    div.style.display = 'none';
    element.appendChild(div);
    for (i = 0; i < 4; i++) {
      div.style.cssText = 'display:block;width:0;height:0;position:absolute;left:' + (i % 3 ? 100 : 0) + '%;top:' + (i < 2 ? 0 : 100) + '%;';
      e[i] = div.getBoundingClientRect();
    }
    element.removeChild(div);
    return e;
  }
  var e = coords(element), a, d, c;
  a = [
    [e[3].top - e[0].top, e[0].top - e[1].top],
    [e[0].left - e[3].left, e[1].left - e[0].left]
  ];
  d = (a[0][0] * a[1][1] - a[0][1] * a[1][0]);
  c = [event.pageX - window.pageXOffset - e[0].left, 
       event.pageY - window.pageYOffset - e[0].top];
  return {
    x: (c[0] * a[0][0] + c[1] * a[1][0]) / d,
    y: (c[0] * a[0][1] + c[1] * a[1][1]) / d
  };
}

var log = document.getElementById('log');
var element = document.getElementById('clickMe');

document.addEventListener('mousemove', function (event) {
  var t = +new Date();
  var res = offsetXY(event, element);
    log.innerHTML = [event.offsetX, event.offsetY].toString() + '<br>x: ' + (res.x * 100).toFixed(1) + '%, y: ' + (100 * res.y).toFixed(1) + '% ' + (+new Date() - t);
}, false);