← 返回项目
PROJECT · 10

ATROPOS / CARD

让指针驱动多个独立层级,观察一个平面组件如何获得空间感和反馈。

状态
Working prototype
角色
视觉设计、交互工程
周期
1 天
年份
2026
03视觉层级
30°最大倾斜
0依赖包
CASE STUDY
Interaction3DCSS

它解决什么

很多 3D 效果只在首页当装饰。这个 Demo 把倾斜、层级和指针位置拆开,让这种反馈可以被用于项目卡片、产品封面或功能入口。

里面可以做什么

  • 在卡片上移动指针,观察背景网格、色块和文字的不同位移。
  • 调整倾斜强度和透视距离。
  • 开启自动漂浮,或一键重置位置。

技术取舍

交互模型参考 Atropos,当前版本用 CSS 3D 和原生事件重写,保持小体积并方便嵌入现有页面。

结果

空间感不再是一个抽象形容词,而是可调、可复用的交互参数。

SANDBOXED EXPERIENCE

可交互 Demo

Demo 在隔离的沙箱中运行。