CSS3 3D Transform non funziona su IE11

Question

Sto cercando di costruire un cubo con CSS3 3D Transform ..

Per questo esempio ho solo 2 facce:

<section id="header-cube-container"> 
    <div id="header-cube"> 
     <figure></figure> 
     <figure></figure> 
    </div> 
</section> 

Con ogni altro browser Ottengo un buon risultato, ma è strano con IE 11.

Ho un buon 3D tradurre e ruotare sulla faccia verde (1), ma la faccia rossa (2) perpendicolare non viene visualizzata in 3D. È solo la proiezione del viso rosso sul viso verde.

È possibile vedere il risultato su questo fiddle.

PS: faccio una rotazione di 100 gradi e non 90 per vedere la proiezione della faccia rossa sulla faccia verde (se l'angolo era 90, la proiezione non è visibile).

Grazie a tutti!

Answer 1

IE non supporta ancora transform-style: preserve-3d.

È necessario rimuovere la trasformazione da #header-cube e applicarla a ciascuno dei bambini figure. Sfortunatamente, IE utilizza già le proprietà non prefissate, quindi non è possibile utilizzare transform-3d o è necessario definire le proprietà prefissate per ultime.

Dal IE transforms documentation:

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

JSFiddle: http://jsfiddle.net/TTDH7/17/

#header-cube { 
    transform-style: preserve-3d; 
    transform: rotateX(43deg) rotateZ(130deg); 
} 
figure:nth-child(1) { 
    transform: translateZ(-16px); 
} 
figure:nth-child(2) { 
    transform: rotateY(-100deg) translateZ(-16px); 
} 

diventa:

#header-cube { 
    transform-style: preserve-3d; 
    -ms-transform-style: none; 
    transform: rotateX(43deg) rotateZ(130deg); 
    -ms-transform: none; 
} 
figure:nth-child(1) { 
    transform: translateZ(-16px); 
    -ms-transform: rotateX(43deg) rotateZ(130deg) 
        translateZ(-16px); 
} 
figure:nth-child(2) { 
    transform: rotateY(-100deg) translateZ(-16px); 
    -ms-transform: rotateX(43deg) rotateZ(130deg) 
        rotateY(-100deg) translateZ(-16px); 
}