用 rotate3d 配合 @keyframes 实现自然可控的卡片 hover 倾斜：1. 用 rotate3d(1, 0.3, 0, 8deg) 模拟前倾+侧倾；2. 设 transform-origin: bottom center 并搭配 ease-out 缓动；3. 容器加 perspective: 600px，hover 时增强 box-shadow；4. 用 @supports 检测兼容性并提供 rotate 兜底。
用 rotate3d 配合 @keyframes 实现卡片 hover 微微倾斜，关键不在“炫酷”，而在“自然”和“可控”。直接上核心思路：不靠纯 2D 的 rotate()（容易突兀），而是用 rotate3d(x, y, z, angle) 模拟轻微 3D 倾斜感，再用动画缓动让过渡柔和。
1. 基础倾斜：用 rotate3d 控制轴向和角度
rotate3d 四个参数分别代表绕 x/y/z 轴旋转的权重和总角度。想要“微微前倾+略带侧倾”的真实感，推荐这样写：
- x=1, y=0.3, z=0, angle=8deg → 主要绕 x 轴前倾，带一点 y 轴偏转，模拟拿起卡片时的自然视角
- 避免用
rotate3d(1, 0, 0, 15deg)这种纯上下倾，会显得僵硬 - 角度建议控制在 5–10deg 之间，超过 12deg 就容易“翻车”
2. 动画平滑：用 keyframes + transform-origin 精准锚点
倾斜效果是否稳，一半看 transform-origin。默认从中心转，但卡片常需“像被指尖轻抬一角”：
- 加
transform-origin: bottom center;→ 让底部不动，顶部翘起，更符合物理直觉 - 动画定义简洁即可，例如：
@keyframes tiltUp {
0% { transform: rotate3d(1, 0.3, 0, 0); }
100% { transform: rotate3d(1, 0.3, 0, 8deg); }
}
hover 时触发，配合 transition: transform 0.3s ease-out; 或直接用 animation: tiltUp 0.3s ease-out forwards;
立即学习“前端免费学习笔记（深入）”；
3. 加点真实感：补上透视和阴影变化
纯旋转不够“立体”，加两处细节立刻提升质感：
- 给卡片容器加
perspective: 600px;（别加在卡片自身！）→ 让 3D 变换有纵深感 - hover 时同步增强
box-shadow：y 偏移加大 + 模糊略增 + 颜色稍浅，模拟“离桌面更近”的投影变化
4. 兼容与降级：别让老浏览器卡住
rotate3d 在 IE10+、主流浏览器都支持，但要注意：
- 加
transform: rotate(0);作为兜底（防极个别旧 Safari bug） - 用
@supports (transform: rotate3d(1, 1, 1, 1deg))包裹动画逻辑，安全优雅 - 如果只求“轻微倾斜”，其实
transform: rotate(-1deg)+transition也完全够用，更轻量
基本上就这些。不复杂但容易忽略的是：倾斜不是目的，让卡片看起来“可交互、有反馈、不跳脱”才是重点。
