4

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

Christian Vincenzo Traina
  • 9,546
  • 2
  • 40
  • 63

1 Answers1

1

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>
fanfare
  • 1,827
  • 1
  • 21
  • 22