本文详解如何将鼠标驱动的 3D 倾斜效果正确应用到 CSS Grid 容器内所有子元素（而非仅首个），通过 querySelectorAll 绑定事件并基于元素自身坐标系计算旋转角度，确保每个卡片响应独立、精准。
本文详解如何将鼠标驱动的 3d 倾斜效果正确应用到 css grid 容器内所有子元素（而非仅首个），通过 `queryselectorall` 绑定事件并基于元素自身坐标系计算旋转角度，确保每个卡片响应独立、精准。
要让 3D 倾斜效果作用于 Grid 容器中每一个子元素（如多个 .card > div），关键在于两点：
- 正确选取全部目标元素，而非仅用 querySelector 获取第一个；
- 为每个元素独立计算旋转偏移量，使用其自身的尺寸与鼠标相对位置，而非整个视口坐标。
✅ 正确做法：遍历所有子元素并绑定事件
const cards = document.querySelectorAll('.card > div');
cards.forEach(card => {
card.addEventListener('mousemove', cardMove);
});
function cardMove(e) {
const box = e.currentTarget;
const rect = box.getBoundingClientRect();
const midX = box.offsetWidth / 2;
const midY = box.offsetHeight / 2;
const x = e.clientX - rect.left; // 鼠标相对于元素左上角的 X 坐标
const y = e.clientY - rect.top; // 鼠标相对于元素左上角的 Y 坐标
// 计算绕 X/Y 轴的旋转角度（单位：deg），以中心为基准，幅度可控
const rotX = (((x - midX) / midX) * 20).toFixed(2); // 水平倾斜：X 方向影响 rotateY
const rotY = ((-1 * (y - midY) / midY) * 20).toFixed(2); // 垂直倾斜：Y 方向影响 rotateX
box.style.transform = `perspective(200px) rotateX(${rotY}deg) rotateY(${rotX}deg)`;
}? 为什么原代码只生效于第一个元素？
document.querySelector('.card > div') 仅返回匹配的第一个 DOM 元素，后续子元素未被监听。改用 querySelectorAll + forEach 可覆盖全部。
? 坐标系说明：为何必须用 getBoundingClientRect() 和 clientX/clientY
- e.pageX/e.pageY 是相对于整个文档的坐标，会导致多个卡片共用同一套全局坐标，倾斜方向错乱；
- e.clientX/e.clientY 是相对于视口左上角的坐标，再结合 rect.left/rect.top 可精准换算为鼠标在当前元素内的局部坐标；
- 使用 box.offsetWidth/2 作为中心基准，确保旋转始终围绕元素中心，视觉自然。
⚠️ 注意事项与优化建议
-
重置离开时的状态：建议补充 mouseleave 事件，恢复原始 transform，避免悬停结束仍残留倾斜：
card.addEventListener('mouseleave', () => { card.style.transform = 'perspective(200px) rotateX(0deg) rotateY(0deg)'; }); - 性能优化：对高频 mousemove 事件建议添加节流（throttle）或使用 requestAnimationFrame，尤其在多卡片场景下可显著提升流畅度；
- CSS 层级与透视：确保父容器（.card）已设置 transform: perspective(...)，且子元素 transform 中的 perspective() 值不宜过大（如 200px 更贴近真实 3D 感），避免畸变。
✅ 最终效果验证
当鼠标分别划过 Grid 中任意一个 .card > div 时，该元素将独立响应：
✅ 倾斜中心始终为其自身几何中心；
✅ 倾斜角度随鼠标位置线性变化；
✅ 多卡片互不干扰，支持同时悬停（如需交互隔离，可进一步加 pointer-events: none 到非目标元素）。
通过这一改造，你已从「单例倾斜」升级为「网格级响应式 3D 交互」——这是构建现代卡片墙、产品展示页或信息看板的关键基础能力。
