指针移动时卡牌实时 3D 跟随倾角；点击沿 Y 轴 180° 物理翻牌，露出身份。
ONE
NIGHT
NIGHT
狼人
阵营 · 狼人阵营
移动指针倾角 · 点击翻牌
rotateX 0°
rotateY 0°
状态 卡背
水平拖拽旋转圆环，松手后惯性滑动并磁吸回正到最近卡位，正前方卡片点亮。
?
🦊
?
🐺
?
🦉
?
🐗
?
🐐
?
🦇
← 拖拽旋转 →
角度 0°
朝向 #1
把角色牌拖到玩家槽位：命中槽位呼吸高亮→松手磁吸吸附并触发指令；拖到空白处弹簧回弹。模拟强盗偷牌/捣蛋鬼换牌链路。
夜晚行动 · 选择技能目标
🗡
强盗
偷一张牌
🔀
捣蛋鬼
交换两牌
🔮
预言家
查验身份
玩家 1
玩家 2
玩家 3
玩家 4
命中 -
指令 待命…
单指拖动旋转立方体；双指捏合缩放、旋转（Pointer Events 天然同时支持鼠标与触屏）。
1
2
3
4
5
6
单指旋转 · 双指捏合缩放 / 旋转
指针 0
scale 1.00
rotZ 0°
整个场景按景深分层，指针移动时各层以不同速度错位——连月亮、山丘、像素爱心都是用 box-shadow 逐像素拼出的纯 DOM 画面，无任何图片。
层数 4
深度系数 1.6 / 1.1 / 0.55 / 0.25
✅ 这套栈能做
- CSS 3D 透视 / 翻面 / 层级（perspective、preserve-3d、backface-visibility）
- 全部指针交互：拖拽、多指、指针捕获、命中检测（Pointer Events）
- GPU 加速的 transform / opacity 动效，流畅动画
- 像素级画面：image-rendering、box-shadow 逐像素绘制
- 完整语义化 DOM、无障碍、移动端适配
⛔ 该交给 Canvas / WebGL / 引擎
- 数千同屏节点的独立动画（DOM 节点树开销）
- 逐像素渲染：粒子、烟雾、后处理、光照
- 3D 网格 / 模型导入（CSS 3D 只能变换平面）
- 精确物理碰撞与刚体模拟
- 音视频实时合成
压力测试 · 全 DOM 翻转卡批量渲染
FPS --
点击上方按钮生成全 DOM 翻转卡，观察 FPS 变化——找到「纯 DOM」的甜蜜点与拐点。