AUTO · 自动演示
参数调改
PLAYGROUND
最大倾角--tilt_max
316
透视距离--perspective
5001600
跟随柔度--lerp
0.030.3
深度倍率--z_mult
0.41.8
强调色--accent
实现要点
NOTES- 01
场景宽度用 min(400px, calc(100vw - 56px)) 这类确定值:场景在 place-content:center 的 auto 轨道里居中、子元素又全是绝对定位,宽度写百分比会按『内容宽 0』解析,整个场景塌成一条竖线——居中容器的主体宽度禁用百分比。
- 02
视差只靠『一个旋转变换 + 各元素不同 translateZ』:world 整体 rotateX/rotateY,元素深度差自动产生位移差,没有逐层 JS 计算。
- 03
深度标尺统一乘 --z_mult(写在 calc 里连乘):一个参数把整个场景从『纸片』拉到『深井』,比逐个调 Z 高效得多。
- 04
will-change:transform 只加在 world 上(整个场景一个合成层);overflow:hidden 裁切放在 scene 外层——preserve-3d 元素自身不能设 overflow,会强制扁平化、3D 失效。
- 05
指针归一化到 [-1,1] 后乘 --tilt_max:光标右上 → 场景右倾、后景相对左移,方向与直觉一致;离开回正;perspective 越小视差越夸张。
- 06
reduced-motion:不启动 rAF 循环,场景静置在正视姿态;触屏可换 deviceorientation 或常开自动漂移。
- 07
预览空闲演示:静置约 3s 后场景自动缓慢环视,用户一移动立即接管。
源代码
SOURCE
加载源代码…