PROJECT · 10
ATROPOS / CARD
让指针驱动多个独立层级,观察一个平面组件如何获得空间感和反馈。
03视觉层级
30°最大倾斜
0依赖包
CASE STUDY
它解决什么
很多 3D 效果只在首页当装饰。这个 Demo 把倾斜、层级和指针位置拆开,让这种反馈可以被用于项目卡片、产品封面或功能入口。
里面可以做什么
- 在卡片上移动指针,观察背景网格、色块和文字的不同位移。
- 调整倾斜强度和透视距离。
- 开启自动漂浮,或一键重置位置。
技术取舍
交互模型参考 Atropos,当前版本用 CSS 3D 和原生事件重写,保持小体积并方便嵌入现有页面。
结果
空间感不再是一个抽象形容词,而是可调、可复用的交互参数。
SANDBOXED EXPERIENCE
可交互 Demo
Demo 在隔离的沙箱中运行。