CSS视差中perspective、translateZ、scale与height的关联探究

核心原理 #

纯CSS视差依赖3D透视变换实现：

• perspective：定义观察者到元素平面的距离，数值越小，透视变形与视差效果越强。
• translateZ(-d)：将视差元素沿Z轴向后移动d距离，视觉上会缩小，同时滚动时会产生滞后的视差位移。
• scale(s)：放大元素以抵消translateZ带来的缩小效果，让元素视觉上保持原尺寸。

基础尺寸匹配公式 #

要让视差元素视觉尺寸与原始状态一致，scale必须满足：

scale = 1 + d / perspective

其中d是translateZ的绝对值（因使用负值实现后移）。比如你用perspective:2px、translateZ:-1px，理论上scale应为1 + 1/2 = 1.5，你之前用1.7是额外增加了滚动时的高度冗余，这也是后续修改vh高度后出现重叠的原因之一。

与非视差部分vh高度的关联逻辑 #

当调整非视差部分的高度H（比如从70vh改为50vh），需同步调整两个参数避免重叠：

1. 视差元素高度补偿：
   视差元素的高度需设置为 H * scale，这样当滚动完非视差部分的H距离时，视差元素刚好完全移出视野，不会与下一个元素重叠。
2. 固定视差强度的比例规则：
   若要维持相同的视差滚动幅度，需保持d/perspective的比例不变。比如你之前的比例是1/2，无论perspective和d如何调整，只要维持这个比例，视差滚动的滞后强度就不会改变。

针对你的问题的修正方案 #

当非视差部分从70vh改为50vh时：

• 若保留perspective:2px、translateZ:-1px，则scale应设为1.5（基础公式值），同时视差元素高度设为50vh * 1.5 = 75vh，即可避免重叠。
• 若想保留1.7倍的scale，需调整perspective和translateZ匹配比例：设perspective:x、translateZ:-y，满足1 + y/x = 1.7（即y/x = 0.7），同时视差元素高度设为50vh * 1.7 = 85vh。

总结 #

完全不需要试错，遵循两个核心规则即可：

• 用scale = 1 + |translateZ|/perspective保证元素视觉尺寸不变；
• 视差元素高度 = 非视差部分高度 × scale，确保滚动时无重叠；
• 若要固定视差强度，保持|translateZ|/perspective的比例恒定即可。

内容的提问来源于stack exchange，提问作者Lisa Thamer