Why overflow setting: hidden; to break the declaration of the reverse side?

Question

I have a “flexible” modal dialog consisting of two divs (front and back):

<div class="modal-dialogue"> <div class="modal-content"> <div class="front"> <h1>Front</h1> </div> <div class="back"> <h1>Back</h1> </div> </div> </div> 

Using CSS conversion, I flip the modal text to show the flip side by adding the “inverted” class to the modal content with:

 .modal-content.flipped { -webkit-transform: rotateY(180deg); } 

Everything works fine ... except when I add overflow: hidden; property for modal content. Suddenly, the back div is not visible, and instead, the back of the front div becomes visible (even if it has hidden visibility to the back).

It seems very strange. Why does setting an overflow property change back visibility this way?

You can see it in action in this fiddle: https://jsfiddle.net/amxp02mx/ . It works fine, but if you comment line 31 in CSS by overflowing: hidden, it will break.

Can someone explain why?

Answer 1

you can see the explanation here in the documentation: https://drafts.csswg.org/css-transforms/#grouping-property-values

also your problem is easily fixed by adding

 overflow:hidden; 

to the rule div.modal-content div

https://jsfiddle.net/amxp02mx/4/