如何修复JavaScript中3D元素的addEventListener绑定及透视偏移问题

一、修复forEach绑定事件失效的问题 #

针对事件绑定没生效的情况，逐一排查并解决：

1. 确保DOM加载完成后执行代码 #

如果JS代码在DOM元素渲染前就运行，querySelectorAll会找不到目标元素，导致绑定失败。把代码放在DOMContentLoaded回调里，或者将脚本标签放在</body>之前：

document.addEventListener('DOMContentLoaded', function() {
  // 精准选中First Dog和Second Dog区域下的.project-img
  const projectImgs = document.querySelectorAll('#first-dog .project-img, #second-dog .project-img');
  
  projectImgs.forEach(img => {
    img.addEventListener('mousemove', handleMouseMove);
    img.addEventListener('mouseleave', handleMouseLeave);
  });
});

// 3D交互核心逻辑
function handleMouseMove(e) {
  const img = e.currentTarget;
  const rect = img.getBoundingClientRect();
  const x = e.clientX - rect.left;
  const y = e.clientY - rect.top;
  
  const centerX = rect.width / 2;
  const centerY = rect.height / 2;
  
  // 计算旋转角度，可根据需求调整幅度
  const rotateY = ((x - centerX) / centerX) * 15;
  const rotateX = ((centerY - y) / centerY) * 15;
  
  img.style.transform = `perspective(1000px) rotateX(${rotateX}deg) rotateY(${rotateY}deg)`;
}

function handleMouseLeave(e) {
  e.currentTarget.style.transform = 'perspective(1000px) rotateX(0) rotateY(0)';
}

2. 核对选择器准确性 #

确认"First Dog"和"Second Dog"区域的DOM标识（ID/类名）是否正确，比如区域用类名而非ID的话，要把选择器改成.first-dog .project-img, .second-dog .project-img，避免因选择器错误导致元素匹配失败。

3. 动态元素用事件委托 #

如果图片是页面加载后动态生成的（比如AJAX加载），直接用forEach绑定会漏掉元素，改用事件委托绑定到共同父容器：

document.addEventListener('DOMContentLoaded', function() {
  // 绑定到图片的共同父容器，比如.projects-wrap
  const parentContainer = document.querySelector('.projects-wrap');
  
  parentContainer.addEventListener('mousemove', function(e) {
    if (e.target.matches('#first-dog .project-img, #second-dog .project-img')) {
      handleMouseMove(e);
    }
  });
  
  parentContainer.addEventListener('mouseleave', function(e) {
    if (e.target.matches('#first-dog .project-img, #second-dog .project-img')) {
      handleMouseLeave(e);
    }
  });
});

二、修复透视效果过度偏向顶部的问题 #

这个问题主要和透视原点、变换原点的设置有关：

1. 调整父容器的perspective-origin #

将透视原点设为元素中心，避免效果偏移到顶部。给图片的直接父容器添加CSS：

.project-img-parent {
  perspective: 1000px; /* 保持透视距离，可按需调整 */
  perspective-origin: center center; /* 关键：把透视原点固定在中心 */
  overflow: hidden; /* 可选：防止旋转时内容溢出 */
}

注意：不要把perspective直接加在图片上，放在父容器才能让透视效果正确作用于图片旋转。

2. 固定图片的transform-origin #

确保图片的旋转支点在中心，避免旋转时偏移：

.project-img {
  transform-origin: center center; /* 旋转原点设为中心 */
  transition: transform 0.3s ease; /* 平滑过渡动画 */
}

3. 修正rotateX计算逻辑 #

如果之前的旋转角度计算是基于顶部的，会导致效果偏向顶部。比如保持handleMouseMove里的rotateX = ((centerY - y) / centerY) * 15逻辑，以图片中心为基准计算角度，确保上下方向的透视对称。

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