CSS：不会破坏 3D 变换的“溢出：隐藏”替代方案

Posted 2023-03-05

【中文标题】CSS：不会破坏 3D 变换的“溢出：隐藏”替代方案

【英文标题】：CSS: "overflow: hidden" alternative that doesn't break 3D transforms

【发布时间】：2021-11-29 17:24:27

【问题描述】：

我正在尝试制作具有视差效果的水平部分。在背景中应该有一个以与页面不同的速度滚动的图像。

问题是：我希望视差元素包含在父元素中，因此父元素的作用类似于子元素的掩码：子元素仅在父元素的边界内可见。

我知道这可以通过将视差元素放在两个元素之间来实现，这些元素的背景在视差元素“上方”并阻挡它，但这种方法不适用于我的情况。

想到的明显想法是使用溢出：隐藏在父级上。然而，这会破坏 3D 变换，因此不会留下任何视差。

如何实现描述的效果？

这是一个代码笔：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>

【参考方案1】：

据我所知，您无法使用 translateZ 实现所描述的效果。 这是因为根据this article about CSS 3D

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

据我所知，溢出隐藏的唯一替代方法是put something "above" the parallax element（您说过要避免）。

如果实在没有办法在视差元素“上方”放置一些东西，你可以尝试用 js 做一些类似的事情（比如this for example）。这并不理想，因为它意味着大量的计算和变量，并且可能需要一些时间才能完全完成您想要的（并且由于您需要溢出，所以您在容器内松散了 3D：无论如何都隐藏）。

如果你真的需要里面的 3d，你可以使用 javascript 创建一个更复杂的解决方案，也可以跳过 overflow: hidden。但我会尽量避免 if 不是强制性的（我宁愿在启用 3D 的overflow: hidden 容器上添加一个绝对元素。如果您在该部分仍需要 3D，则提供绝对容器透明背景）。

通常我也建议尽量避免使用.js 处理这类东西（如果可能的话），但我认为你在这里没有很多选择。

【参考方案2】：

你可以试试 :not() 伪类，但我不知道你会在括号中传递什么，类似于黑色方块中的 not。