MOTION HUB

3D 按压卡片

3D Press Card
#card-3d-press · 05/72
HOVER · 悬停交互

参数调改

PLAYGROUND
按压倾角--press_tilt
218
deg
按压缩放--press_scale
0.881
按下时长--press_ms
50260
ms
回弹时长--return_ms
2001000
ms
回弹曲线--ease
铰链边--origin

实现要点

NOTES
  1. 01

    双速过渡是手感核心:按下走 --press_ms 的 ease-out(干脆利落),松手走 --return_ms 的过冲弹性曲线(回弹一次)——两条 transition 在常态与 :active 间切换。

  2. 02

    transform-origin 由 --origin 控制铰链边:默认底边像按下去的琴键,可切顶边/中心;--press_tilt 配合 stage 上的 perspective:900px 产生真实透视。

  3. 03

    内容层各自 translateZ(12-28px) 制造『表面下沉、内容浮起』的深度差;动效只改 transform/box-shadow,不触发布局。

  4. 04

    box-shadow 同步收缩变浅:物体压向桌面时落影变近变小,这条『物理逻辑』让按压感可信。

  5. 05

    role=button + tabindex 保留语义;focus-visible 用描边而不是按压形变,避免键盘用户长期停在变形状态;生产建议补 Enter/空格触发按压态。

  6. 06

    预览自动演示:body 未被 hover 时以 6s 周期自动按压两次(keyframes 复用 --press_tilt/--press_scale);光标进入即让位;reduced-motion 全部停用。

源代码

SOURCE

加载源代码…