transform-styleProprietatea, atunci când este aplicat la un element, determină dacă copiii acel element sunt poziționate în spațiu 3D, sau aplatizate.
.parent ( transform-style: preserve-3d; )Acceptă una dintre cele două valori: flat(implicit) și preserve-3d. Pentru a demonstra diferența dintre cele două valori, faceți clic pe butonul de comutare din CodePen de mai jos:
Când se face clic pe buton, demo-ul folosește JavaScript pentru a comuta transform-stylevaloarea între preserve-3dși flat.
După cum puteți vedea, atunci când valoarea este schimbată în flat, elementele copil nu mai sunt stivuite în funcție de translateZvalorile (în spațiul 3D), ci se aplatizează pentru a apărea modul în care elementele sunt implicit pe o pagină HTML.
Suport pentru browser
| Crom | Safari | Firefox | Operă | IE | Android | iOS |
|---|---|---|---|---|---|---|
| 12+ | 4+ | Peste 10 ani | 15+ | Nici unul | 3.0+ | 3.2+ |
Toate browserele necesită prefixe pentru furnizori, cu excepția Firefox 16+. Opera folosește -webkit-versiunea 15 și conversia Blink.
IE10 acceptă transformări 3D, dar nu acceptă transform-styleproprietatea.