Berechnen Sie die Mausposition in gedrehten Teilen ⇐ HTML

[Anonymous]

Wie berechnet man die Mausposition (ClientX, ClientY) in gedrehtem und skaliertem DIV?
HTML-Struktur:

• SCALED DIV – transform: scale(0.8);
  
  ROTATED DIV – transform: rotation(340deg);
  
  ROTATED TARGET DIV – transform: rotieren (45 Grad);

ROTATED DIV kann in einem anderen gedrehten Div verschachtelt werden und so weiter.

Wie ich weiß, kann DOMMatrix helfen.

Code: Select all

const target = document.getElementById('target');

target.addEventListener('pointermove', evt => {
// TODO: calculate coords in target DIV
const divX = evt.clientX;
const divY = evt.clientY;
console.log(divX, divY);
});

Code: Select all

html,
body {
padding: 0;
margin: 0;
height: 100%;
}














LEFT TOP