Question 222856 in Html Question posted in
Some basic documentation can be found here.

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

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

Here is HTML code

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

Here is CSS

.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);
}

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?

Tags:

2

Answers


  1. 0

    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.

    Login or Signup to reply.
  2. 0

    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>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search