Warum Überlauf-Einstellung: versteckt; die Rückseitensichtbarkeitserklärung brechen?

Question

Ich habe einen „flippable“ modalen Dialog, bestehend aus zwei divs (vorne und hinten):

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

Mit CSS-Transformation mir die modalen Flip über den Rücken zu offenbaren, indem die „gekippt“ Klasse in dem Modal- Hinzufügen Inhalt mit:

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

das alles funktioniert gut ... außer, wenn ich den Überlauf hinzu: hidden; Eigenschaft für den Modal-Inhalt. Plötzlich ist das Backdiv nicht mehr sichtbar und stattdessen wird die Rückseite des Frontdivs sichtbar (obwohl die Backface-Sichtbarkeit auf "Versteckt" gesetzt ist).

Das scheint sehr seltsam. Warum sollte die Einstellung der Überlaufeigenschaft die Rückseitensichtbarkeit auf diese Weise ändern?

Sie können es in dieser Geige in Aktion sehen: https://jsfiddle.net/amxp02mx/. Es funktioniert gut, aber wenn Sie Zeile 31 in der CSS kommentieren, machen Sie den Überlauf: versteckt, es ist kaputt.

Kann jemand erklären warum?

Answer 1

Sie die Erklärung hier in der Dokumentation sehen: https://drafts.csswg.org/css-transforms/#grouping-property-values

auch Ihr Problem durch Zugabe von

overflow:hidden; 

zur .modal-Inhalt div Regel leicht fixiert ist

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