Search code examples
csscss-transitionstransformwebkit-perspective

"position: absolute" in a child doesn't work if body has perspective

I faced a problem while building a simple CSS transition.

I have my body element which its only child is a div with position absolute.

Inside the div I inserted a rectangle with a simple 3d transition on the hover pseudoclass: transform: rotateX(90deg), and I want to set a perspective style in the parent element in order to make it appear better.

When I set a perspective in the body the transition works properly: it creates the perspective effect and it looks good. But -and the problem is here- the child loses the absolute position (at least in Chrome).

I created a codepen example, you can comment the body style out and this will apply an absolute position.

When the perspective is set the div also loses its blue background, but I think this happens because its height becomes 0.

Is it a bug? How can I fix it?

Thank you

Solution

  • Ran into this exact same issue, very weird behavior. Adding perspective to the body introduces weird quirks, my approach was to create a virtual 'body' container inside the to act as if it were the body.

    Instead of something like

    <html>
  <body style="perspective: 1000px">
    <div style="transform:rotate(10deg); position:absolute"></div>
  </body>
</html>

    try

    <html>
  <body>
    <container style="perspective: 1000px">
      <div style="transform:rotate(10deg); position:absolute"></div>
    </container>
  </body>
</html>