CSS: "overflow: hidden" 的替代方案，不会破坏3D变换

Question

我想制作一个具有视差效果的水平部分。背景应该是一张图片，以与页面不同的速度滚动。

问题在于：我希望视差元素包含在父元素中，因此父元素就像子元素的掩膜一样工作：子元素只在父元素的边界内可见。

我知道可以通过将带有遮挡并在"视差"元素上面的背景的两个元素之间放置视差元素来实现这一点，但这种方法对我的情况不适用。

显然的想法是在父元素上使用 overflow: hidden。但是这会破坏3D变换，所以没有剩余的视差效果。

如何实现所描述的效果？

这里有一个 Codepen：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>

- Radosław Rzeczkowski

Answer 1

据我所知，您无法使用translateZ实现所描述的效果。这是因为根据关于CSS 3D的这篇文章：

...给overflow属性赋值除visible之外的任何值都会有效地将transform-style属性的值强制为flat，即使我们已经将其明确设置为preserve-3d。

据我所知，overflow hidden的唯一替代方法是在“视差元素”的上方放置一些东西（您说您想避免这样做）。

如果真的没有在“视差元素”上方放置任何东西的选项，您可以尝试使用js进行类似的操作（例如这个例子）。这并不理想，因为它将涉及大量计算和变量，并且可能需要一些时间才能完全实现您想要的效果（而且您仍然需要overflow:hidden，因此会失去容器内部的3D效果）。

如果您真的需要其中的3D效果，那么您可以创建一个更复杂的解决方案，使用JavaScript跳过overflow:hidden属性。但如果不是必须的话，我建议尽量避免这样做（我宁愿在启用3D的overflow:hidden容器上添加一个绝对定位元素。如果您仍然需要该部分中的3D效果，则给绝对定位容器设置透明背景）。

通常，我也建议尽可能避免在此类问题中使用.js文件，但我认为您在这里没有太多选择。

- Berci

Answer 2

你可以尝试使用:not() 伪类，但我不知道你需要传递什么参数到括号中，才能达到与黑色方块中not相似的效果。

- Proking73Questioneer