Получить позицию щелчка мышью на 3D Div - PullRequest
Новая
       7

Получить позицию щелчка мышью на 3D Div

0 голосов
/ 21 ноября 2018

Я пробовал это: 

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>

Ссылка на jsfiddle

, но она работает только без 3D-поворота.Если я щелкну, например, в правом нижнем углу красного делителя, то это должно вернуть мне что-то около (потому что вы никогда не дотягиваете до точного угла) X: 300px и Y: 300px.Но это работает только тогда, когда элемент не вращается.Итак, как я могу получить нажатую позицию с вращением 3d?(если вращение меняется, то оно тоже должно работать!)

...