这个效果是怎么做出来的
核心分三层。第一层是指针追踪：监听 pointermove，算出指针相对卡片中心的位置，归一化到 -1 到 1 的范围。第二层是透视旋转：把这两个值交给 rotateX 和 rotateY，最大限制在 12 度左右，再多就显得像旋转而不是倾斜；父容器要设置 perspective（800 到 1000px），旋转才会呈现真实的 3D 纵深。第三层是流光：一层径向渐变叠在卡片上，圆心坐标跟随指针同步移动，模拟反光跟着手走的效果。
真正的质感藏在松手那一刻。生硬的做法是指针一离开就把角度归零，看起来很机械；这里把松手时的角度交给弹簧曲线（带超调的 cubic-bezier），让卡片稍微甩过头再荡回来，和真实物体的物理感一致。全程只动 transform，动画走 GPU 合成层，不触发布局计算，中端手机也能稳 60 帧。
怎么用这条提示词
复制提示词发给你的 AI 编程工具，指明要套用的组件即可。如果你用 React 或 Vue，在同一条消息里说明，AI 会把逻辑封装成组件钩子而不是散落的内联监听。移动端建议额外叮嘱一句「补上 touch 支持」，提示词里已经 hint 了 pointer 事件，明确说出来第一次生成就能全端可用。
想效果更好？试试这些
最大角度控制在 8 到 15 度之间，太陡会影响文字阅读。卡片里有按钮等可点击子元素时，让 AI 把倾斜挂在内层包裹元素上，保住子元素的点击区域。低端设备上可以用 prefers-reduced-motion 关掉流光层，照顾关闭装饰动画的用户。