我可以嵌套 CSS 个视差组吗？

Question

jsfiddle: https://jsfiddle.net/c3fveqgz/1/

改编自：https://keithclark.co.uk/articles/pure-css-parallax-websites/

我有一个静态元素，其 children 中有视差背景图像。我想让那个外部元素也有视差效果。

我在 jsfiddle 中加入了我天真的尝试，当 id="NEST_ME" 是 id="INSIDE_HERE" 的 child 时，内部视差效果被破坏了。

这是HTML：

<div class="parallax-wrap">
  <div id="NEST_ME" class="parallax-view-wrap" style="height:60vh;">
    <div class="parallax-view" style="top:0; bottom:40vh">
      <div class="parallax-group">
        <div class="parallax-back cat-img"></div>
      </div>
    </div>
    <div class="parallax-view" style="top:20vh; bottom:20vh">
      <div class="parallax-group">
        <div class="parallax-back cat-img"></div>
      </div>
    </div>
    <div class="parallax-view" style="top:40vh; bottom:0;">
      <div class="parallax-group">
        <div class="parallax-back cat-img"></div>
      </div>
    </div>
  </div>

  <div class="parallax-group">
    <div id="INSIDE_HERE" class="parallax-fore cat-img"></div>
  </div>
</div>

您可以查看 jsfiddle link 中的 CSS。

Answer 1

如果您将 parallax-group class 添加到 id="INSIDE_HERE" 元素，fiddle 中的第 27 行，它会起作用：https://jsfiddle.net/bc4umhxv/3/

这似乎与您在父元素上需要的 transform-style: preserve-3d; 属性有关。

我可以嵌套 CSS 个视差组吗？

Can I Nest CSS Parallax Groups?

html

css

parallax