Chrome中transform rotate效果异常，需基于元素中心实现鼠标控制旋转

你的代码核心问题在于坐标计算逻辑错误和旋转角度的计算方式不合理，导致只有鼠标在浏览器左上角时旋转才会生效。以下是修正方案：

问题分析 #

1. 坐标参考系混乱：混用文档坐标（e.pageX/Y）和视口坐标（cardRect.left/top），未准确计算鼠标相对于方块中心的位置。
2. 旋转角度计算错误：当前除法公式会让旋转角度极小，仅当e.pageX/Y接近0（浏览器左上角）时才有明显值，无法实现基于中心的相对旋转。

修正后的代码 #

HTML #

<div class="card"></div>

CSS #

.card {
  width: 400px;
  height: 400px;
  background-color: #00f;
  margin: 0 auto;
  padding: 0;
  transform-style: preserve-3d;
  transform: perspective(800px); /* 增大透视值，效果更自然 */
  will-change: transform;
}

JavaScript #

window.addEventListener("mousemove", (e) => {
  const card = document.querySelector(".card");
  const cardRect = card.getBoundingClientRect();
  
  // 计算方块中心在视口中的坐标
  const cardCenterX = cardRect.left + card.clientWidth / 2;
  const cardCenterY = cardRect.top + card.clientHeight / 2;
  
  // 计算鼠标相对于方块中心的偏移量
  const xOffset = e.clientX - cardCenterX;
  const yOffset = e.clientY - cardCenterY;
  
  // 计算旋转角度：偏移量除以元素宽高，乘以系数放大效果
  // rotateX对应垂直方向移动，取负值保证方向逻辑一致
  const rotX = -(yOffset / card.clientHeight) * 20;
  const rotY = (xOffset / card.clientWidth) * 20;
  
  // 应用旋转效果
  card.style.transform = `rotateX(${rotX}deg) rotateY(${rotY}deg)`;
});

关键修正点 #

• 使用e.clientX/Y（视口内鼠标坐标）替代e.pageX/Y，避免页面滚动对坐标计算的干扰。
• 直接通过cardRect计算方块中心的视口坐标，无需依赖body位置。
• 用鼠标与中心的偏移量除以元素宽高得到相对比例，再乘以系数（如20）控制旋转幅度，确保鼠标在方块边缘时旋转角度最大，中心时角度为0。
• 调整rotateX的符号，保证鼠标移动方向与方块旋转方向逻辑一致（鼠标向上移，方块向下倾斜）。

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