使用CSS转换时，DOM坐标是错误的

Question

我正在尝试解决如何获得元素的正确坐标和移动，但发现CSS变换不与元素DOM坐标对齐。

我也试图通过JS代码本身更改元素的CSS Transformation的属性。

您在演示中可以看到的问题是该元素未到达#wrap div的所有四个角。

合并skew或perspective属性而不是轮换更好吗？我刚刚阅读Top & Left position with Transform Rotate（发布为重复的问题），但这并没有解释如何轮换这个示例的预期会有效吗？

HTML

<div id="wrap">
  <div id="thing"></div>
</div>

JS

$(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 + "<br />" + relativeY;
});
});

CSS

#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;
}

直播：https://jsfiddle.net/h9ad4k63/