位移与变换 · 移动、旋转、缩放
3D 倾斜3D tilt
- 立体
- 跟随
- 有质感
根据鼠标或手指的位置,让卡片在三维空间里轻微转向,像被光扫过一样。
什么时候用它
用于展示型卡片、封面等可以慢慢玩味的元素;表单和长文本上不要用,会干扰阅读。
参数
perspective 800px · rotateX/rotateY ≤ 8deg · follows 150ms ease-out
配方
3D 倾斜 → 150ms ease-out条件 rotateX/rotateY ≤ 8deg3D 倾斜 → perspective 800px · follows 150ms ease-out
给 AI 的一句话
给这张卡片加鼠标跟随的 3D 倾斜:容器 perspective: 800px,卡片最多 rotateX/rotateY 8 度,跟随用 150ms ease-out,移开后回到 0。