如果父级隐藏溢出，为什么 tranlateZ() 属性不起作用

Answer 1

您必须将视角移动到

.container

元素。使用

overflow: hidden

可以防止透视效果的“传播”

.wrapper {
  height: 100vw;
  width: 100vh;
}

.container {
  width: 80%;
  height: 79%;
  transform-style: preserve-3d;
  overflow:hidden;
  perspective: 10px;
}

.box{
  height: 40%;
  width:30%;
  margin:20px;
  background-color: green;
  transform:translateZ(-33px);
}

<div class="wrapper">
    <div class="container">
      <div class="box">
      </div>
    </div>
  </div>

Answer 2

您面临的问题与溢出属性有关。当您在.container元素上设置overflow:hidden时，它会创建一个新的堆叠上下文，这会影响translateZ属性应用于其子元素的方式。

当您使用overflow:hidden时，.container元素将成为其子元素的新容器，并且translateZ将相对于该新容器的位置应用。这可能会导致 3D 转换出现意外行为。

要解决此问题，您可以将溢出：隐藏属性应用于包装元素而不是 .container 元素。