JS实现mousemove触发transform动画时旋转原点偏移、无法向左上倾斜问题

问题根因 #

• 旋转方向单一：你直接使用event.layerX、event.layerY计算旋转角度，这两个值是鼠标相对于盒子左上角的坐标，取值永远为正，计算出来的角度自然只有单一方向，无法向左/上旋转。
• 旋转原点偏移：你手动计算的像素值和默认center效果一致，看起来不对的核心原因是全局通配符*设置了margin:50px，所有元素都被加了外边距，导致3D透视的视觉效果错位，误以为原点不对。

修正后的代码 #

JS部分 #

const box = document.querySelector('#box');
box.addEventListener('mousemove', function(event) {
    // 计算盒子中心坐标
    const middleX = this.clientWidth / 2;
    const middleY = this.clientHeight / 2;
    // 鼠标坐标减去中心坐标，得到正负偏移量
    const offsetX = event.layerX - middleX;
    const offsetY = event.layerY - middleY;
    // 计算旋转角度，系数可根据想要的效果调整
    const rotateX = -(offsetY / 7);
    const rotateY = offsetX / 7;

    // 直接用center更稳妥，不需要手动计算像素
    this.style.transformOrigin = `center`;
    this.style.transform = `rotateX(${rotateX}deg) rotateY(${rotateY}deg)`;
});
// 可选：鼠标离开盒子时复位效果
box.addEventListener('mouseleave', function() {
    this.style.transform = `rotateX(0) rotateY(0)`;
});

CSS部分（仅调整全局样式问题，其他规则保留） #

/* 去掉通配符的全局margin，只给body加外边距避免布局错乱 */
body {
    margin: 50px;
    padding: 0;
}
* {
    box-sizing: border-box;
}
.container {
    perspective: 1000px;
    background-color: rgb(105, 105, 105);
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid black;
    /* 给container加固定宽高，避免变形 */
    width: 300px;
    height: 300px;
}
#box {
    height: 200px;
    width: 200px;
    background-color: rgb(0, 255, 255);
    border-radius: 20%;
    transition: 0.3s ease;
}

HTML部分无需修改，和原有代码一致即可正常运行。

内容的提问来源于stack exchange，提问作者Kofusu