如何将getBoundingClientRect与变换比例一起使用

Question

我有一个div元素，它按5缩放，宽度和高度为64px。现在，如果我使用div.getBoundingClientRect，它不适用于变换比例，这意味着即使它被缩放了，它仍然有64px的宽度和高度(无法更好地解释它(。html:

<div id=div style="transform: scale(5); width: 64px; height: 64px"></div>

js:

function getMousePosition(e) {
var offset = div.getBoundingClientRect();
mouse = {
x: e.pageX - offset.left,
y: e.pageY - offset.top
}
}

我试图在一个64px的div中获取鼠标位置，但ofc，它不适用于变换比例。

Answer 1

function getMousePosition(e) {
var offset = div.getBoundingClientRect();
console.log(offset)
mouse = {
x: e.pageX - offset.left,
y: e.pageY - offset.top
}
}

document.querySelector('div').addEventListener('mousemove', getMousePosition)

<div id=div style="transform: scale(5); width: 64px; height: 64px; background: red"></div>