<p>CSS变量（如--rx、--ry）必须配合JS实时更新并用calc()包裹（如rotateX(calc(var(--rx) * 1deg))）才能实现鼠标坐标映射的动态3D倾斜，:hover或@keyframes仅支持预设静态角度，无法响应实时坐标变化。</p>
直接用 transform 写死角度或透视值，就失去了“动态”的意义；真正能响应鼠标、滚动或状态变化的 3D 效果，必须靠 CSS 变量（--rx、--ry、--perspective）配合 JS 实时更新，再由 transform 读取计算 —— 否则只是静态动画。
为什么不能只用 :hover 或 @keyframes
这些方式只能触发预设状态，无法根据鼠标坐标实时映射旋转角度。比如卡片随鼠标 X/Y 偏移量线性变化的 rotateX 和 rotateY，必须靠 JS 获取 offsetX/offsetY，再写入变量，CSS 才能响应。否则你看到的只是“悬停翻转 180°”，不是“鼠标在哪，它就朝哪倾斜”。
transform 中如何安全引用 CSS 变量
关键点是：所有 rotateX()、rotateY()、perspective() 都不支持直接插值变量，必须用 calc() 包裹，且单位不能省略：
transform: perspective(calc(var(--p, 600) * 1px)) rotateX(calc(var(--rx, 0) * 1deg)) rotateY(calc(var(--ry, 0) * 1deg));- 不能写成
rotateX(var(--rx))—— 浏览器会忽略整个transform声明 -
var(--p)必须乘以单位（如1px），否则perspective不生效 - 初始值建议设默认数（如
var(--rx, 0)），避免未定义时渲染异常
JS 更新变量时的常见坑
直接用 element.style.setProperty('--rx', value) 没问题，但要注意：
立即学习“前端免费学习笔记（深入）”；
- 别在循环里高频调用 —— 用
requestAnimationFrame节流，否则卡顿明显 - 鼠标坐标要相对于元素自身，用
e.offsetX/e.offsetY，不是clientX - 角度计算别硬套公式：通常
--rx = (centerY - e.offsetY) / height * maxAngle，注意符号方向（上移应为正rotateX还是负？） - 移动端没有
offsetX，得用getBoundingClientRect()手动算相对位置
性能与兼容性底线
这个模式在 Chrome/Firefox/Safari（2023+）中稳定，但有硬限制：
- IE 完全不支持 CSS 变量 +
transform动态组合，别尝试降级 - 低端安卓 WebView（如 Android 8-9 的系统浏览器）可能抖动或丢帧，加
will-change: transform有时有用，但别滥用 - 如果卡片内含大量子元素或阴影，
backface-visibility: hidden和transform: translateZ(0)能减少重绘开销
最易被忽略的是：变量名和 JS 更新逻辑必须严格对应，漏一个连字符或拼错大小写，控制台不会报错，但效果直接消失 —— 它静默失效，而不是崩溃。
