获取3d div上的鼠标点击位置

Question

我尝试过：

function getPosition(e) {
  var rect = e.target.getBoundingClientRect();
  var x = e.clientX - rect.left;
  var y = e.clientY - rect.top;
  return {
    x,
    y
  }
}
window.addEventListener("click", function(event) {
  document.getElementById("info").innerHTML = "ID: " + event.target.id + "<br> X: " + getPosition(event).x + " Y: " + getPosition(event).y;
});

body {
  perspective: 400px;
  margin: 0;
}

#test {
  width: 400px;
  height: 400px;
  background-color: red;
  transform: rotateY(45deg);
  position: absolute;
  left: 40%;
}

#info {
  position: absolute;
  right: 0;
  top: 0;
  box-shadow: 0px 0px 10px black;
  width: 200px;
  border-radius: 10px;
  padding: 5px;
}

<div id="info"></div>
<div style="margin-top: 10%;">
  <div id="test">

  </div>
</div>

Link to jsfiddle

，但是它可以在没有3D旋转的情况下正常工作。例如，如果单击红色div的右下角，它应该带给我一些周围的东西（因为您从未精确地碰到角）X：300px和Y：300px。但这仅在元素不旋转时有效。那么如何通过3d旋转获得点击位置？ （如果轮换发生变化，那么它也必须起作用！）