CSS视差中perspective、translateZ、scale和height之间的关系是什么？

Question

当涉及到纯 CSS 视差时，我一直试图找出透视、变换（更具体地说是 translateZ 和缩放）和高度属性（使用 vh）之间的确切关系。

使用以下数字时，效果按预期工作： 2px perspective, -1px translateZ, 1.7 scale for the parallax-part and 70vh height for the non-parallax-part. 看这里：Working

.middle {height: 70vh;}

然而，当将非视差部分的高度更改为 50vh（同时保持其他一切相同）时，两个背景图像在非视差部分进入视图/覆盖重叠之前显示重叠。 看这里：Overlap showing

.middle {height: 50vh;}

我假设我需要在更改 vh 高度时调整透视、translateZ 和缩放的数字，但是是否有任何公式/押韵和原因如何？还是要反复试验才能找到有效/不显示重叠的组合？

Answer 1

我有点想通了。如果保持 2px perspective 和 -1px translateZ，比例和高度的关系如下：

• 规模1。5个（或更高）至少需要50vh 高度
• 规模1。6个（或更高）至少需要60vh 高度
• 规模1。7（或更高）至少需要70vh高度 等等

但是，这仅适用于 1.5 及以上的比例，不适用于以下。 不确定低于 1.5 的比例因子与高度的关系（还）。