css - 视差(相对)层组相互重叠

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

这里传统 html 定位的相对性被 layer_back 元素和 layer_front 元素实际上移动到 3d 上下文并缩放这一事实严重干扰。

为了实现视差效果，这里所做的是:

设置 1px 透视图(相机距渲染平面 1px)。

.parallax {
    perspective: 1px;
}

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

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

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

这就是为什么它们是按比例缩放 (2) 的，所以它们以原始大小出现。

事情是，它们在不改变它们的相对位置的情况下从相机移开(它们紧挨着彼此)，然后它们就地缩放，比例尺在它们的中心设置变换原点的操作，使它们变大并相互重叠。

要解决此问题，您可以做的是先将它们彼此远离，然后再缩放它们。

看看 fork 和更新的 fiddle ，我已经删除了背面层上的“scale(2)”部分，它们在后面，并且它们的位置正确(没有重叠)。 http://jsfiddle.net/3x150vsx/1/

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

您的问题的解决方案在于在尝试扩大它们之前将它们彼此远离。

祝你好运:>