结论：用 perspective + translatez() 实现多层视差的核心是将图层置于不同z轴深度，借3d透视自然产生速度差与景深感；background-attachment: fixed 仅支持单层静态背景，无真实z轴、不兼容ios safari≤15、无法响应缩放且缺乏景深。
直接说结论：用 perspective + translateZ() 实现多层视差，核心不是“让背景动得慢”，而是“把图层放在不同Z轴深度上，靠3D透视自然产生速度差”。
为什么 background-attachment: fixed 不够用
它只能固定一层背景，无法控制多层间的相对位移比例；在 Safari iOS ≤ 15 上会退化为 scroll，且不支持响应式缩放补偿；更重要的是——它没有真实 Z 轴，也就没有景深感，只是“静止 vs 滚动”的二元对比。
常见错误现象：background-attachment: fixed 在 iPhone 上滚动时背景跟着动、文字遮不住背景、视差层级发虚。
- 必须搭配
transform-style: preserve-3d才能让子元素保持 3D 空间关系 -
perspective值越小（如1px），景深越夸张；越大（如1000px）越接近平面，建议从2px～5px调试 - 所有参与视差的图层需设
position: absolute或fixed，否则会被文档流挤变形
perspective 容器必须设 overflow: hidden
否则 translateZ 向负方向移动的图层（比如背景）会溢出容器边界，出现意外裁切或滚动条。
典型配置：
.parallax-wrapper {
perspective: 2px;
height: 100vh;
overflow: hidden; /* 关键！否则负 Z 层会露头 */
transform-style: preserve-3d;
}
- 不要用
overflow-y: auto—— 它会让容器自己滚动，破坏视口锚点 - 如果内容需要滚动，请把可滚动区域放在最上层（
z-index: 3），且该层transform: translateZ(0) -
perspective必须设在滚动触发的父容器上（通常是body或全高section），不能只加在某一层
translateZ 的值和 scale 补偿必须配对
单纯用 translateZ(-1px) 会导致图层因透视被严重缩小。浏览器按公式 scale = 1 + (-translateZ / perspective) 自动缩放，所以你要手动反向补偿。
例如：perspective: 2px 下，translateZ(-1px) 会自动缩放到 scale(1.5)，你得写成：
.layer-back {
transform: translateZ(-1px) scale(0.666); /* 1 / 1.5 ≈ 0.666 */
}
- 背景层（远）用负
translateZ（如-3px），前景层（近）可用正数（如+1px）或0 - scale 值必须是精确倒数，手算容易错，建议用 CSS 自定义属性或 JS 动态注入
- 别忘了给背景层加
pointer-events: none，否则会挡住点击和滚动
移动端 Safari 的兼容性坑
iOS Safari 对 perspective 和 transform-style 的渲染路径更保守，尤其在页面有 position: sticky 或复杂嵌套时容易失效。
- 强制开启硬件加速：给
.parallax-wrapper加-webkit-transform: translateZ(0) - 避免在
body上直接设perspective，改用包裹一层div.parallax-root - 若仍抖动或卡顿，降级方案是监听
scroll+requestAnimationFrame手动计算translateY，而非依赖 3D 变换
真正难的不是写出那几行 CSS，而是理解：Z 轴位移不是“移动距离”，而是“改变观察距离”；而浏览器做的所有缩放、偏移，都是这个几何关系的自然结果。调参时盯着的不该是“动得快不快”，而是“看起来是不是真的在不同距离上”。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
