DOM Coordinates are wrong when using CSS Transformations
<p>I'm trying to solve how to get the correct coordinates and movement of the element but find that the CSS Transformation doesn't align with the elements DOM coordinates.</p>

<p>I've tried to also change the properties of the element's CSS Transformation via the JS code itself.</p>

<p>The problem you can see in the demo is that the element doesn't reach all four corners of the <code>#wrap</code> div.</p>

<p>Is it also better to incorporate a <code>skew</code> or <code>perspective</code> property rather than rotations? I've just read <a href="https://stackoverflow.com/questions/24376672/top-left-position-with-transform-rotate">Top &amp; Left position with Transform Rotate</a> (posted as a duplicated question), but this doesn't explain how to rotation of <strong>this</strong> example's prespective would work?</p>

<p><strong>HTML</strong></p>

<pre><code>&lt;div id="wrap"&gt;
  &lt;div id="thing"&gt;&lt;/div&gt;
&lt;/div&gt;
</code></pre>

<p><strong>JS</strong></p>

<pre><code>$(function() {
$("#wrap").click(function(e) {
    var offset = $(this).offset();
    var relativeX = (e.pageX - offset.left);
    var relativeY = (e.pageY - offset.top);
    document.getElementById("thing").style.left = relativeX + "px";
    document.getElementById("thing").style.top =  relativeY + "px";
    document.getElementById("thing").innerHTML = relativeX + "&lt;br /&gt;" + relativeY;
});
});
</code></pre>

<p><strong>CSS</strong></p>

<pre><code>#wrap {
    height: 300px;
    width: 500px;
    background: green;
    position: relative;
    overflow: hidden;
    transform: rotateX(60deg) rotateZ(-30deg);
}
#thing {
    background: blue;
    width: 50px;
    height: 50px;
    position: absolute;
    transition: 1s;
    left: 0;
    top: 0;
}
</code></pre>

<p>Live: <a href="https://jsfiddle.net/h9ad4k63/" rel="nofollow noreferrer">https://jsfiddle.net/h9ad4k63/</a></p>