Why tranlateZ() property is not working if overflow is hidden for parent

Question

I am trying to apply translateZ after applying perspective and preserving 3-d But not applying on my container;

.wrapper {
  height: 100vw;
  width: 100vh;
  perspective: 10px;
}

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

.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>

after commenting overflow property, tranlateZ works fine Same problem if I try to use overflow-x or overflow-y;

Why is this happening. Is there any solution to that?

Answer 1

The issue you're facing is related to the overflow property. When you set overflow: hidden on the .container element, it creates a new stacking context, and this affects the way the translateZ property is applied to its child elements.

When you use overflow: hidden, the .container element becomes a new container for its children, and the translateZ is applied relative to that new container's position. This can lead to unexpected behavior with 3D transformations.

To solve this issue, you can apply the overflow: hidden property to a wrapping element instead of the .container element.

Answer 2

You have to move the perspective to the .container element. The use of overflow: hidden is preventing "the propagation" of the perspective effect

.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>