La transform-styleproprietà, quando applicata a un elemento, determina se i figli di quell'elemento sono posizionati nello spazio 3D o appiattiti.
.parent ( transform-style: preserve-3d; )Accetta uno dei due valori: flat(predefinito) e preserve-3d. Per dimostrare la differenza tra i due valori, fare clic sul pulsante di attivazione / disattivazione nella CodePen di seguito:
Quando si fa clic sul pulsante, la demo utilizza JavaScript per alternare il transform-stylevalore tra preserve-3de flat.
Come puoi vedere, quando il valore viene modificato in flat, gli elementi figlio non vengono più impilati in base ai translateZvalori (nello spazio 3D), ma invece appiattiti per apparire come gli elementi sono per impostazione predefinita su una pagina HTML.
Supporto browser
| Cromo | Safari | Firefox | musica lirica | IE | Android | iOS |
|---|---|---|---|---|---|---|
| 12+ | 4+ | 10+ | 15+ | Nessuna | 3.0+ | 3.2+ |
Tutti i browser richiedono i prefissi del fornitore, tranne Firefox 16+. Opera utilizza -webkit-dalla versione 15 e la conversione Blink.
IE10 supporta le trasformazioni 3D, ma non supporta la transform-styleproprietà.