Soluzione per la mancanza di proprietà di preservare-3d in IE 10

Question

Microsoft dice sul loro website

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.

Qualcuno può dare un esempio di come dovrebbe essere applicato?

Answer 1

di creare oggetti 3D con transform-style: flat, è necessario rimuovere le trasformazioni dal contenitore div:

.object3d { 
    transform-style: preserve-3d; // remove to get the flat behavior in all browers 
    transform: translateX(80px) rotateY(-35deg); // cut the container transforms. 
} 

Poi ti potrebbe essere necessario per appiattire la struttura html, in modo da non div con le trasformazioni si trovano all'interno di div con trasformazioni.

E incollare le operazioni di trasformazione (che erano sul div contenitore) su tutte le facce prima delle relative trasformazioni.

prima:

.object3d__bottom { 
    transform: translateY(50px) rotateX(90deg); 
} 

dopo:

.object3d__bottom { 
    transform: translateX(80px) rotateY(-35deg) translateY(50px) rotateX(90deg); 
} 

Demo: http://jsbin.com/ICuVihi/17/

Answer 2

Direi che questo non è possibile. (qualunque cosa Microsoft dice). Il flatening dell'elemento figlio non può essere annullato applicando ulteriori trasformazioni. Vedere il seguente demo:

fiddle

con il codice HTML:

<div class="base" id="base1">Base1 
    <div class="inner" id="inner1">1</div> 
    <div class="inner" id="inner2">2</div> 
    <div class="inner" id="inner3">3</div> 
    <div class="inner" id="inner4">4</div> 
    <div class="inner" id="inner5">5</div> 
    <div class="inner" id="inner6">6</div> 
    <div class="inner" id="inner7">7</div> 
    <div class="inner" id="inner8">8</div> 
    <div class="inner" id="inner9">9</div> 
</div> 
<div class="base" id="base2">Base2 
    <div class="inner" id="inner1">1</div> 
    <div class="inner" id="inner2">2</div> 
    <div class="inner" id="inner3">3</div> 
    <div class="inner" id="inner4">4</div> 
    <div class="inner" id="inner5">5</div> 
    <div class="inner" id="inner6">6</div> 
    <div class="inner" id="inner7">7</div> 
    <div class="inner" id="inner8">8</div> 
    <div class="inner" id="inner9">9</div> 
</div> 
<div class="base" id="base3">Base3 
    <div class="inner" id="inner1">1</div> 
    <div class="inner" id="inner2">2</div> 
    <div class="inner" id="inner3">3</div> 
    <div class="inner" id="inner4">4</div> 
    <div class="inner" id="inner5">5</div> 
    <div class="inner" id="inner6">6</div> 
    <div class="inner" id="inner7">7</div> 
    <div class="inner" id="inner8">8</div> 
    <div class="inner" id="inner9">9</div> 
</div> 

e CSS:

.base { 
    width: 200px; 
    height: 250px; 
    display: block; 
    -webkit-transform: rotatey(-45deg); 
    transform: rotatey(-45deg); 
    border: solid 2px black; 
} 

#base1 { 
    -webkit-transform-style: preserve-3d; 
} 

#base2 { 
    left: 300px; 
    top: 0px; 
    position: absolute; 
} 

#base3 { 
    left: 600px; 
    top: 0px; 
    position: absolute; 
    -webkit-transform: rotatey(-88deg); 
    transform: rotatey(-88deg); 
    -webkit-transform-style: preserve-3d; 
} 

.inner { 
    border: solid 1px black; 
    height: 20px; 
    background-color: red; 
} 

#inner1 { 
    -webkit-transform: rotatey(0deg); 
    transform: rotatey(0deg); 
} 
#inner2 { 
    -webkit-transform: rotatey(20deg); 
    transform: rotatey(20deg); 
} 
#inner3 { 
    -webkit-transform: rotatey(40deg); 
    transform: rotatey(40deg); 
} 
#inner4 { 
    -webkit-transform: rotatey(60deg); 
    transform: rotatey(60deg); 
} 
#inner5 { 
    -webkit-transform: rotatey(80deg); 
    transform: rotatey(80deg); 
} 
#inner6 { 
    -webkit-transform: rotatey(100deg); 
    transform: rotatey(100deg); 
} 
#inner7 { 
    -webkit-transform: rotatey(120deg); 
    transform: rotatey(120deg); 
} 
#inner8 { 
    -webkit-transform: rotatey(140deg); 
    transform: rotatey(140deg); 
} 
#inner9 { 
    -webkit-transform: rotatey(160deg); 
    transform: rotatey(160deg); 
} 

che crea una base di div ruotato -45 gradi. Diversi div sono impostati su questo, con diversi angoli di rotazione. Nella prima serie, vista in un browser webkit, c'è un angolo per il bambino che gli dà la posizione orizzontale e quindi la dimensione originale (più ampia del genitore, che viene ruotata). Nella seconda serie, senza preservare 3d, i bambini non possono eccedere la dimensione genitoriale (apparente). La terza serie è un esempio ad angolo: con un angolo di quasi 90 gradi, il genitore svanisce, ma i bambini sono ancora visibili.

Questo non funziona in IE, dimostrando che non è possibile trovare un angolo che ripristini la proprietà preserve-3d.