Internet Explorer Mantieni la correzione 3D

Question

Il seguente codice funziona in tutti i browser ad eccezione di IE.10.

sito Web MSDN dice quanto segue (che non capisco come applicare):

Nota La specifica W3C definisce un valore della parola chiave di preservare-3d per questa proprietà, il che indica che l'appiattimento non viene eseguita. Al momento Internet Explorer 10 non supporta la parola chiave preserve-3d. È possibile aggirare questo problema applicando manualmente la trasformazione dell'elemento genitore a ciascuno degli elementi figlio oltre alla normale trasformazione dell'elemento figlio.

https://msdn.microsoft.com/en-gb/library/ie/hh673529(v=vs.85).aspx

Il mio codice (sto usando selettori CSS per altri motivi):

div[class^="flip"] { 
 
    display: inline-block; 
 
} 
 
div[class^="flip"] { 
 
    -webkit-perspective: 800; 
 
    -moz-perspective: 800; 
 
    -ms-perspective: 800; 
 
    -o-perspective: 800; 
 
    perspective: 800; 
 
    width: 313px; 
 
    height: 480px; 
 
    position: relative; 
 
    margin-right: 10px; 
 
    margin-left: 10px; 
 
} 
 
div[class^="flip"] .card.flipped { 
 
    -webkit-transform: rotatey(-180deg); 
 
    -moz-transform: rotatey(-180deg); 
 
    -o-transform: rotatey(-180deg); 
 
    transform: rotatey(-180deg); 
 
} 
 
div[class^="flip"] .card { 
 
    width: 100%; 
 
    height: 100%; 
 
    -webkit-transform-style: preserve-3d; 
 
    -moz-transform-style: preserve-3d; 
 
    -o-transform-style: preserve-3d; 
 
    transform-style: preserve-3d; 
 
    -webkit-transition: 0.5s; 
 
    -moz-transition: 0.5s; 
 
    -o-transition: 0.5s; 
 
    transition: 0.5s; 
 
} 
 
div[class^="flip"] .card .face { 
 
    width: 100%; 
 
    height: 100%; 
 
    position: absolute; 
 
    -webkit-backface-visibility: hidden; 
 
    -moz-backface-visibility: hidden; 
 
    -o-backface-visibility: hidden; 
 
    backface-visibility: hidden; 
 
    z-index: 2; 
 
    text-align: center; 
 
} 
 
div[class^="flip"] .card .front { 
 
    position: absolute; 
 
    z-index: 1; 
 
    background: #F5F5F5; 
 
    border: #DDD 1px solid; 
 
} 
 
div[class^="flip"] .card .back { 
 
    -webkit-transform: rotatey(-180deg); 
 
    -moz-transform: rotatey(-180deg); 
 
    -o-transform: rotatey(-180deg); 
 
    transform: rotatey(-180deg); 
 
    background: #F5F5F5; 
 
    border: #DDD 1px solid; 
 
}

<div class="flip1"> 
 
    <div class="card"> 
 
    <div class="face front">Front content</div> 
 
    <div class="face back">Back content</div> 
 
    </div> 
 
</div>

la prego di aiutarmi con questo?

Grazie mille!

Answer 1

Internet Explorer 10 e 11 supportano solo parzialmente le trasformazioni 3D. (Le versioni precedenti di Internet Explorer non supportano questa proprietà).

---

Internet Explorer 10 e 11 'hanno solo un supporto parziale' perché:

non sostenere lo stile trasformare-: preserve-3d struttura. Questo impedisce la nidificazione di elementi trasformati 3D.

---

further Reading

Questa struttura è suggerito da attuare nella prossima versione di Internet Explorer, quindi purtroppo la corrente IE in realtà non supporta alcuna funzionalità 3D 'buono' o 'complesso'.

Poiché IE "ignora" questa proprietà, potresti essere in grado di visualizzare un messaggio di banner per informare gli utenti di utilizzare Chrome o Firefox per un'esperienza migliore (significa anche che dovrai implementare meno hacks del browser per supportare IE in generale).

---

In risposta alla tua domanda

Nota La specifica W3C definisce un valore della parola chiave di preservare-3d per questa proprietà, il che indica che l'appiattimento non viene eseguita. Al questa volta, Internet Explorer 10 non supporta la parola chiave preserve-3d . È possibile aggirare questo problema applicando manualmente la trasformazione dell'elemento genitore a ciascuno degli elementi figlio oltre alla normale trasformazione dell'elemento figlio .

Questo suggerisce di applicare manualmente la trasformazione del genitore sull'elemento figlio. Quindi la trasformata 3d dichiarata sul genitore (.flip1) dovrebbe essere posizionata anche sugli elementi figli (.back e .front).

Answer 2

in tutta IE versione preserve-3d non funziona

è possibile applicare una trasformazione 3D a qualsiasi elemento. ma se è genitore anche il 3D viene trasformato, allora la trasformazione NON funzionerà. l'elemento verrà appiattita

così IE10 o IE11 = nessun divertimento in 3D ..

su http://caniuse.com/ dicono che preserve-3d lavoreranno in prossima versione di IE. ma attualmente non