3D 倾斜卡片的成败在于两点：是否用 rAF 节流、是否改的是 transform 而不是布局属性。
性能差异
改 top/left 会触发重排，多张卡片同时动就会明显卡顿；改 transform 只走合成层，几乎不占主线程。这也是提示词里写死"不要改 top/left"的原因。
触屏分支
手机上没有 hover，如果照搬鼠标逻辑，抬手后卡片会停在倾斜状态。让模型明确写出触摸设备降级为点击缩放，手感会自然很多。
可交互的 3D 卡片悬浮翻转效果
鼠标跟随倾斜 + 高光反射的 3D 卡片，用 transform 3D 实现，交互手感接近原生应用。
直接开始使用
这条提示词无需补充变量，可直接复制使用。
提示词内容
实现一个鼠标跟随的 3D 倾斜卡片效果。
【交互要求】
- 鼠标在卡片内移动时，卡片绕 X/Y 轴倾斜，最大角度 12 度
- 倾斜方向跟随鼠标相对卡片中心的位置
- 卡片上叠加一层跟随鼠标的高光反射
- 鼠标离开后带缓动回正，回正时间 400ms
- 支持键盘焦点（Tab 聚焦时显示等效高光）
【技术要求】
- 只用 transform: rotateX/rotateY + perspective，不要改 top/left
- mousemove 用 requestAnimationFrame 节流
- 触摸设备不启用倾斜，改为点击时整体缩放
- 提供可复制的完整 HTML/CSS/JS 单文件
卡片内容：{标题} / {副标题}。
这样使用，效果更稳
1
先确认 rAF 节流写法，直接绑 mousemove 会拖慢页面。
2
最大角度别超过 15 度，再大就变成"翻跟头"。
3
触屏分支一定要保留，否则手机上会诡异抖动。
