视差（相对）图层组相互重叠

Question

我不明白为什么会这样： 我有： https://jsfiddle.net/d5jehq02/1

<div class="para_group"> 
   <div class="para_layer para_layer_back"> 
     <h2>background</h2>  
   </div> 
   <div class="para_layer para_layer_front"> 
     <h2>forefront</h2> 
   </div> 
</div>

我正在尝试创建视差滚动效果，虽然 2 个父层 (class='para_group') 的位置 ='relative'，但子 div 仍然存在 - 特别是似乎与其父层重叠...

如果您看到上面的示例链接，您会意识到第二组的背景层 - 似乎与第一组重叠在一起 - 当它不应该重叠时 - 组的位置设置为相对 - 因此块对象（父 div) 应该出现在另一个下方... 我无法解决这个问题:(

Answer 1

由于 layer_back 元素和 layer_front 元素实际上被移动到 3d 上下文中并被缩放，因此这里传统 html 定位的相关性受到严重干扰。

要实现视差效果，这里要做的是：

设置 1px 透视（相机设置为距离渲染平面 1px）。

.parallax {
    perspective: 1px;
}

将背景层移动到视野深处 1 像素，同时将它们缩放到原来的两倍。

.para_layer_back {
    transform: translateZ(-1px) scale(2);
}

^ 这是视差效果的核心，​​当我们将透视设置为 1px 时，将元素移动 1px 深，将元素定位到距相机的距离是前面层（translateZ'd by 0）的两倍。这会产生滚动时的视差效果，但也会使元素看起来更小，因为它们更远（透视效果）。

这就是为什么它们是 scale(2) 的，所以它们以原始大小显示。

问题是，它们在不改变相对位置的情况下从相机中移开（然后它们彼此相邻），然后它们被原地缩放，比例在它们的中心设置变换原点的操作，使它们变大并相互重叠。

解决问题的方法是先将它们彼此分开，然后再缩放它们。

看看分叉和更新的小提琴，我删除了后面层上的“scale(2)”部分，它们在后面，并且它们定位正确（没有重叠）。 http://jsfiddle.net/3x150vsx/1/

.para_layer_back {
    transform: translateZ(-1px) scale(1);
}

解决问题的方法在于在尝试扩大它们之前将它们彼此分开。

祝你好运：>