Rückseite Sichtbarkeit funktioniert nicht bei Kindern

Question

Diese Lösungen (Webkit backface visibility not working) hat nicht funktioniert, da ich andere transformierte Objekte in Container haben möchte, die die Rückseite zeigen sollte.

.container { 
 
    position: relative; 
 
    transform-origin: 50% 50% 0; 
 
    transition: transform 1s ease 0s; 
 
    width: -moz-min-content; 
 
    width: -webkit-min-content; 
 
} 
 
.container img { 
 
    backface-visibility: hidden; 
 
} 
 
input:checked + .container { 
 
    transform: rotateY(180deg); 
 
}

<input type="checkbox" name="" id="" /> 
 
<div class="container"> 
 
    <img src="http://todofondosdeamor.com/wp-content/uploads/images/48/gatitos-1__400x300.jpg" alt="" /> 
 
</div>

Die Rückenfläche dieser Katze sollte nicht sichtbar sein. Irgendeine Lösung für dieses Problem?

Answer 1

ich schließlich entdeckt, wie das Problem zu lösen sind Umwandlung, dies zu lösen! Das Problem war, dass das 3D das Bild nicht beeinflusste. Nur durch Hinzufügen der Eigenschaft: transform-style: preserve-3d; enthält das Bild als Teil der "3D-Welt". Vorher funktionierte die Rückseiten-Eigenschaft nicht, weil es wirklich nicht 3D war! Es war wie eine Textur auf der Oberfläche der Eltern. Jetzt ist es eine 3D-Entity mit all ihren Komponenten und es kann in 3D transformiert werden, ohne auf die Oberfläche des Elternteils zu kollabieren.

.container { 
 
    position: relative; 
 
    transform-origin: 50% 50% 0; 
 
    transition: transform 1s ease 0s; 
 
    width: -moz-min-content; 
 
    width: -webkit-min-content; 
 
    transform-style: preserve-3d; 
 
} 
 
.container img { 
 
    backface-visibility: hidden; 
 
} 
 
input:checked + .container { 
 
    transform: rotateY(180deg); 
 
}

<input type="checkbox" name="" id="" /> 
 
<div class="container"> 
 
    <img src="http://todofondosdeamor.com/wp-content/uploads/images/48/gatitos-1__400x300.jpg" alt="" /> 
 
</div>

Answer 2

EDIT backface-visibility: hidden; auf Elem Einstellung

.container { 
 
    position: relative; 
 
    transform-origin: 50% 50% 0; 
 
    transition: transform 1s ease 0s; 
 
    width: -moz-min-content; 
 
    width: -webkit-min-content; 
 
} 
 
.container{ 
 
    backface-visibility: hidden; 
 
    
 
} 
 
input:checked + .container { 
 
    transform: rotateY(180deg); 
 
}

<input type="checkbox" name="" id="" /> 
 
<div class="container"> 
 
    <img src="http://todofondosdeamor.com/wp-content/uploads/images/48/gatitos-1__400x300.jpg" alt="" /> 
 
</div>