鼠标跟随倾斜
Tilt Effect
初级网页鼠标跟随倾斜（Tilt Effect）是让卡片随着鼠标位置微微倾斜，鼠标在哪边、哪边就往下压，常配一道跟着鼠标移动的反光。它让卡片像一块拿在手里的实物，作品集、产品官网、游戏卡牌里很常见。
你可能会说：「作品集里的项目卡片，能不能鼠标移上去时跟着鼠标微微倾斜，还带一点反光？」
读之前建议先了解
动手看看跟着鼠标歪一歪
要点鼠标跟随倾斜是怎样起作用的？
- 1
把鼠标位置换算成角度
监听鼠标在卡片上的移动，把鼠标在卡片里的横向位置换算成 -1 到 1，乘以最大角度得到 rotateY；纵向位置同理得到 rotateX。鼠标在右边，卡片右侧往里压；鼠标在下面，下边往里压。父元素加上 perspective，倾斜才有近大远小的立体感。反光是一层半透明的径向渐变，圆心跟着鼠标位置走。
- 2
角度要小
最大倾斜一般 8~15°。角度太大时卡片边缘忽上忽下，文字跟着变形难以阅读，卡片上的按钮也会「躲」着鼠标，点不准。鼠标离开时要用 300~600 毫秒缓慢回正，突然弹回平面会显得很廉价。只动 transform，不要改宽高或位置，滑动才流畅。
- 3
只是锦上添花
手机和平板没有悬停，触屏用户根本看不到这个效果，所以卡片本身必须不依赖它也好用。实现时只响应鼠标（判断 pointerType），触屏上不要倾斜，否则手指一碰卡片就歪了。开启减少动效时也应该关掉倾斜，只保留悬停高亮。
容易混淆的地方
鼠标跟随倾斜是持续跟手的变化，和普通的悬停效果（移上去放大一点、换个颜色）不同：悬停效果只有「悬停」和「没悬停」两个状态，倾斜的角度随鼠标位置连续变化。它和视差滚动原理相近，都是用运动制造深度感，但视差跟着滚动走，倾斜跟着鼠标走。
什么时候用
适合用
- 作品集或软件下载页的项目卡片，鼠标移上去时微微倾斜，增加质感。
- 会员卡、优惠券这类「实物感」强的卡片展示，配合反光像一张塑料卡。
- 游戏、潮玩类网站的角色卡牌展示。
不适合用
- 数据表格、表单这类需要认真阅读和操作的区域，别加倾斜；保持平稳。
- 主要用户在手机上时，别把重要信息藏在倾斜或反光效果里；触屏看不到。
- 一页有几十张卡片的列表，别每张都倾斜；挑重点展示的几张就够了。
练一练选一个答案，看看解释
你给软件下载卡片加了鼠标跟随倾斜，最大角度 30°。用户反馈「下载按钮总是点不准」。怎么改最合适？
让 AI 帮你做复制给 AI Agent 直接用
请给【需要质感的卡片，如：作品集页的项目卡片】加上鼠标跟随倾斜。先阅读卡片组件和项目里已有的动画写法，确认不需要新增依赖。要求：父元素加 perspective，按鼠标在卡片内的位置计算 rotateX 和 rotateY，最大不超过 12°；可选加一层跟随鼠标的径向渐变反光；鼠标离开时 300~600 毫秒缓慢回正；只动 transform；只响应鼠标，触屏不倾斜；开启减少动效时关闭倾斜，保留悬停高亮。卡片里的按钮和链接必须照常可点。沿用现有写法，不改无关代码。最后说明怎样验证：手机上卡片不会歪，桌面上点击卡片内按钮准确。