MOTION HUB

视差 3D 场景

Parallax Tilt Scene
#parallax-tilt-scene · 43/72
AUTO · 自动演示

参数调改

PLAYGROUND
最大倾角--tilt_max
316
deg
透视距离--perspective
5001600
px
跟随柔度--lerp
0.030.3
深度倍率--z_mult
0.41.8
强调色--accent

实现要点

NOTES
  1. 01

    场景宽度用 min(400px, calc(100vw - 56px)) 这类确定值:场景在 place-content:center 的 auto 轨道里居中、子元素又全是绝对定位,宽度写百分比会按『内容宽 0』解析,整个场景塌成一条竖线——居中容器的主体宽度禁用百分比。

  2. 02

    视差只靠『一个旋转变换 + 各元素不同 translateZ』:world 整体 rotateX/rotateY,元素深度差自动产生位移差,没有逐层 JS 计算。

  3. 03

    深度标尺统一乘 --z_mult(写在 calc 里连乘):一个参数把整个场景从『纸片』拉到『深井』,比逐个调 Z 高效得多。

  4. 04

    will-change:transform 只加在 world 上(整个场景一个合成层);overflow:hidden 裁切放在 scene 外层——preserve-3d 元素自身不能设 overflow,会强制扁平化、3D 失效。

  5. 05

    指针归一化到 [-1,1] 后乘 --tilt_max:光标右上 → 场景右倾、后景相对左移,方向与直觉一致;离开回正;perspective 越小视差越夸张。

  6. 06

    reduced-motion:不启动 rAF 循环,场景静置在正视姿态;触屏可换 deviceorientation 或常开自动漂移。

  7. 07

    预览空闲演示:静置约 3s 后场景自动缓慢环视,用户一移动立即接管。

源代码

SOURCE

加载源代码…