直接用 transform: rotateX() 和 rotateY() 会失效，因CSS默认以元素中心为原点且无法感知鼠标位置；需结合 perspective、preserve-3d、实时计算鼠标相对中心偏移并归一化映射角度，再用 requestAnimationFrame 更新。
为什么直接用 transform: rotateX() 和 rotateY() 会失效？
CSS 的 transform 默认以元素自身中心为原点，且没有“感知鼠标位置”的能力。单纯写死的旋转值（比如 rotateX(5deg) rotateY(-5deg)）只能固定倾斜，无法跟随鼠标移动。关键缺失的是：实时计算鼠标相对于卡片中心的偏移量，并映射为旋转角度。
- 必须启用
perspective容器（通常加在父容器上），否则 3D 效果无深度感 - 卡片自身需设
transform-style: preserve-3d，让子元素的 3D 变换不被扁平化 - 倾斜角度不能过大（建议 ±5° 内），否则视觉失真或触发硬件加速抖动
如何用 JavaScript 获取鼠标相对卡片中心的坐标？
监听 mousemove 事件时，不能直接用 event.clientX/clientY，因为它们是视口坐标。需要转换为相对于卡片左上角的坐标，再减去卡片宽高的一半，得到中心偏移量：
card.addEventListener('mousemove', (e) => {
const rect = card.getBoundingClientRect();
const x = e.clientX - rect.left - rect.width / 2;
const y = e.clientY - rect.top - rect.height / 2;
// x、y 现在是以卡片中心为原点的坐标（单位：px）
});
- 注意：必须在
mouseenter后才开始监听，避免空悬停触发计算 -
getBoundingClientRect()返回的是当前渲染位置，支持缩放和滚动后的位置校正 - 若卡片有
transform（如 scale），需额外处理，但多数视差场景应避免嵌套 transform
怎么把像素偏移安全映射成旋转角度？
直接拿 x 和 y 像素值当角度会失控（比如鼠标移到边缘可能转出 100°）。正确做法是归一化：将偏移量除以卡片宽高的一半，得到 [-1, 1] 区间值，再乘以最大允许角度（如 4.5）：
-
rotateY = (-x / (rect.width / 2)) * 4.5（注意负号：鼠标右移 → 卡片向右倾 → 视觉上像绕 Y 轴逆时针转 → CSS 中rotateY()正值是顺时针，所以要取负） -
rotateX = (y / (rect.height / 2)) * 4.5（鼠标下移 → 卡片抬头 → 绕 X 轴正向转） - 最终
transform应写作：rotateX(${rx}deg) rotateY(${ry}deg)，顺序不能颠倒（先绕 X 转，再绕 Y 转）
- 归一化分母用
rect.width / 2而非rect.width，是为了让鼠标到达边缘时恰好达到最大角度 - 使用
requestAnimationFrame批量更新样式，避免频繁重排重绘
为什么卡片边缘出现锯齿或闪烁？
这是 3D 变换中常见的层叠与抗锯齿问题，尤其在 Chrome 和 Safari 下明显：
立即学习“前端免费学习笔记（深入）”；
- 添加
backface-visibility: hidden到卡片本身，强制开启 GPU 渲染并隐藏背面 - 加
will-change: transform（仅在悬停时动态添加，离开时移除），提示浏览器提前优化 - 避免同时对同一卡片设置
filter（如drop-shadow）和 3D transform，二者混合易触发光栅化异常 - 如果卡片含图片，确保其
image-rendering: -webkit-optimize-contrast或设为crisp-edges可缓解缩放模糊
真实项目里最常被忽略的是 perspective 的作用域——它必须写在卡片的最近公共父容器上，且不能被 overflow: hidden 截断，否则 3D 效果会被裁剪。
