3D 变换与透视:翻牌与倾斜
把元素从二维平面抬进三维空间,只需三件 CSS 设施:父级的 perspective 给出观察者到屏幕的距离
(景深),rotateX / rotateY 让元素绕水平 / 垂直轴转动,transform-style: preserve-3d
让子元素真正活在同一个 3D 坐标系里而非被压扁回平面。下面两个 demo 把它们的运动交给动画引擎驱动:
翻牌绕 Y 轴转 180° 露出背面,
倾斜用弹簧平滑跟随光标。
card flip:点击卡片或按钮,绕 Y 轴 180° 翻转 (springEasing 驱动 rotateY)
A
FRONT
★
BACK
rotateY 0°
面朝 FRONT
perspective 800px
tilt:把光标移到下方卡片上,卡片绕 X / Y 轴弹性倾斜并跟随高光;移开自动回正
TILT
rotateX 0.0°
rotateY 0.0°
transform-style: flat 会把子元素先渲染成 2D 图像再贴到父级平面,子元素的 Z 与自身旋转都被抹平;
设为 preserve-3d 后子元素才保留各自的 3D 位置,翻牌的正反两面、tilt 卡片上凸起的 chip / badge
才能各自落在不同 Z 深度。backface-visibility: hidden 让背朝观察者的那一面不可见——翻牌正是给背面预旋
180°,翻转过半时正面转开、背面转入,自然完成正反切换。轴向:rotateX 绕水平轴 (上下点头),
rotateY 绕垂直轴 (左右摇头);tilt 把光标的纵向偏移映射到 rotateX、横向偏移映射到 rotateY。
@vega/anim — 用 springEasing 驱动翻牌、用 createSpring 平滑跟随倾斜
翻牌的回弹质感来自把弹簧化成的缓动 (见弹簧);tilt 的「平滑跟随并自然回正」是
createSpring 接住每次重定向时的当前值与速度的结果,与手势驱动里
拖拽松手后的惯性收敛同源。