CSS：“溢出：隐藏”的替代方案，不会破坏3D变换 我正在尝试制作具有视差效果的水平部分。在后台，应该有一个图像以与页面不同的速度滚动。 问题是：我想要视差eleme ...

Question

我如何实现所描述的效果？

here是一个编码：

Https：//codepen.io/rradarr/full/mdwgard

。 我希望红色矩形在“视差范围内”之外不可见。

* {
      margin: 0;
    }
    
    html, body {
      height: 100%
    }
    
    main {
      position: relative;
      width: 100%;
      
      perspective: 1px;
      transform-style: preserve-3d;
      overflow-y: auto;
      overflow-x: hidden;
      height: 100vh;
      
      background-color: blue;
    }
    
    .static {
      min-height: 800px;
    }
    
    .parallax-container {
      border: solid black 3px;
      height: 600px;
      width: 100%;
      transform-style: preserve-3d;
      position: relative;
    }
    
    .parallax-child {
      position: relative;
      width: 100%;
      height: 100%;
      transform: translateZ(-2px) scale(2.01);
      z-index: -1;
    }
    
    #img-or-whatever {
      height: 900px;
      width: 100%;
      background-color: red;
      position: relative;
      z-index: -1;
    }

<main>
      <div class="static"></div>
        
      <div class="parallax-container">
        <div class="parallax-child">
          <div id="img-or-whatever"></div>
        </div>
      </div>
    
      <div class="static"></div>
    </main>

据我所知，您无法通过Translatez实现所描述的效果。 这是因为根据有关CSS3D的文章 ...除了可见之外，给出任何其他值有效地迫使转换风格的价值变为平坦，即使我们将其明确将其设置为保存3D。

据我所知（您说要避免），隐藏溢出的唯一替代方法是

put something "above" the parallax element

Answer 1

。

如果真的没有选项将某些内容放在“上方”视差元素上方，您可以尝试使用JS类似的事情（例如thishis this，例如）。这不是理想的选择，因为它会暗示很多计算和变量，并且可能需要一些时间才能完全完成您想要的东西（并且由于您需要溢出，因此在容器内部放松了3D：无论如何都隐藏）。 如果您确实需要内部的3D，则可以使用JavaScript创建一个更复杂的解决方案，该解决方案也可以跳过。但是，如果不是强制性的，我会尽力避免这种情况（我宁愿在启用3D的

overflow: hidden

容器上添加一个绝对元素。如果您在该部分中仍然需要3D，则给出绝对的容器透明背景）。

通常，我还建议尝试避免使用这种东西（如果可能的话），但我认为您在这里没有很多选择。

您可以尝试：不是（）伪CLS，但是我不知道您会传递到类似于不在黑色正方形的括号中。

contain

可能是限制子元素超出其父母大小的侵入性的一种侵入性方法。例如，内联元素：

.js