mousemove实现元素倾斜 坐标居中及transform多属性生效问题

问题点对应修复逻辑 #

• 坐标原点转换：原生e.clientX、e.clientY以视口左上角为原点，要切换为中心原点，直接将鼠标坐标减去视口宽高的二分之一即可。转换后视口中心坐标为(0, 0)，视口左、上区域坐标为负值，右、下区域坐标为正值，完全匹配中心原点的坐标规则。
• 双轴变换失效修复：CSS的transform属性赋值是全量覆盖逻辑，先后两次赋值时，后设置的rotateY会直接替换前一次设置的rotateX，必须将多个变换规则拼接在同一个transform属性值中，才能同时生效。
• 轴映射修正：rotateX是绕水平X轴旋转，对应鼠标垂直方向（Y轴）的位移；rotateY是绕垂直Y轴旋转，对应鼠标水平方向（X轴）的位移，原代码轴映射写反，会导致鼠标移动方向和元素旋转方向错位。

可直接运行的修复代码 #

document.onmousemove = function(e){
  // 计算中心原点下的鼠标偏移量
  const offsetX = e.clientX - window.innerWidth / 2;
  const offsetY = e.clientY - window.innerHeight / 2;
  // 双轴旋转合并到同一个transform属性，负号用于匹配常规倾斜交互的朝向
  document.getElementById("img").style.transform = `rotateX(${-offsetY * 0.005}deg) rotateY(${offsetX * 0.005}deg)`;
}

优化提示：给目标元素的父级添加CSS样式perspective: 1000px，可以让3D倾斜的透视感更真实，不会出现扁平的旋转效果。

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