Backface Visibilità non funziona sui bambini

Question

Queste soluzioni (Webkit backface visibility not working) non funzionavano, come mi piacerebbe avere altri oggetti trasformati all'interno del contenitore che dovrebbero mostrare il backface.

.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>

La controfaccia di quel gatto non dovrebbe essere visibile. Qualche soluzione per questo problema?

Answer 1

ho finalmente scoperto come risolvere questo! Il problema era che il 3d non stava influenzando l'immagine. Semplicemente aggiungendo la proprietà: transform-style: preserve-3d; include l'immagine come parte del "mondo 3d". Prima, la proprietà del backface non funzionava, perché in realtà non era 3d! Era come una trama dipinta sulla superficie del genitore. Ora è un'entità 3d con tutti i suoi componenti e può essere trasformata in 3d senza collassare sulla superficie del genitore.

.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 impostazione backface-visibility: hidden; sul elem si sta trasformando a risolvere il problema

.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>