如何为 CSS Grid 中的每个子元素独立启用 3D 倾斜鼠标悬停效果

本文详解如何将 JavaScript 3D 倾斜效果（tilt effect）正确绑定到 CSS Grid 容器内所有子元素，解决仅首个元素响应 mousemove 的常见问题，并提供基于相对坐标计算的健壮实现方案。

本文详解如何将 JavaScript 3D 倾斜效果（tilt effect）正确绑定到 CSS Grid 容器内所有子元素，解决仅首个元素响应 mousemove 的常见问题，并提供基于相对坐标计算的健壮实现方案。

在使用 CSS Grid 构建卡片布局并希望为每个网格项（如 .card > div）添加独立的 3D 倾斜交互效果时，一个典型误区是仅用 document.querySelector() 获取首个匹配元素，导致事件监听器只挂载到第一个子元素上。要让每个网格项都具备响应式倾斜能力，必须批量选取所有目标元素并为每个元素单独绑定事件监听器，同时确保旋转计算基于该元素自身的坐标系（而非整个视口），才能实现精准、互不干扰的交互体验。

✅ 正确做法：遍历所有子元素 + 局部坐标计算

使用 document.querySelectorAll('.card > div') 获取全部目标元素，再通过 forEach() 为每个元素注册 mousemove 事件：

const cards = document.querySelectorAll('.card > div');cards.forEach(card => {card.addEventListener('mousemove', cardMove);});function cardMove(e) {const box = e.currentTarget; // 当前触发事件的具体 div 元素const rect = box.getBoundingClientRect(); // 获取其相对于视口的位置和尺寸const midX = box.offsetWidth / 2;const midY = box.offsetHeight / 2;// 计算鼠标相对于该元素左上角的偏移量（关键！）const x = e.clientX - rect.left;const y = e.clientY - rect.top;// 根据偏移比例计算旋转角度（±20° 范围更自然）const rotX = (((x - midX) / midX) * 20).toFixed(2);const rotY = ((-1 * (y - midY) / midY) * 20).toFixed(2);// 应用透视 + 双轴旋转（注意：perspective 值不宜过大，200px~500px 更适合小卡片）box.style.transform = `perspective(200px) rotateX(${rotY}deg) rotateY(${rotX}deg)`;}

⚠️ 关键注意事项

1. 避免使用 pageX/pageY：它们基于整个文档坐标，受滚动影响；应改用 clientX/clientY 配合 getBoundingClientRect() 实现元素局部坐标系下的精准定位。
2. 重置 mouseleave 状态（推荐增强）：为提升用户体验，建议在 mouseleave 时还原 transform：

   card.addEventListener('mouseleave', () => {card.style.transform = 'perspective(200px) rotateX(0deg) rotateY(0deg)';});

3. CSS 中移除冗余 perspective：.card > div 上已声明 transform: perspective(500px)，但实际倾斜逻辑中重复设置 perspective() 会覆盖或冲突，建议仅在 JS 动态 transform 中统一控制，CSS 中保留基础样式即可。
4. 性能优化提示：若网格项数量较多，可考虑使用事件委托（但需注意 mousemove 高频特性，委托后坐标计算更复杂），对中小型网格（≤20 项），forEach + addEventListener 是最清晰可靠的方案。

通过以上改造，每个 .card > div 都能独立响应鼠标移动，产生符合物理直觉的 3D 倾斜效果——无论网格排列方式如何变化，交互始终精准、高效且可维护。