Når transform-styleejendommen anvendes på et element, bestemmer det, om elementets børn er placeret i 3D-rum eller fladt.
.parent ( transform-style: preserve-3d; )Den accepterer en af to værdier: flat(standard) og preserve-3d. For at demonstrere forskellen mellem de to værdier skal du klikke på skifteknappen i CodePen nedenfor:
Når der trykkes på knappen, bruger demoen JavaScript til at skifte transform-styleværdi mellem preserve-3dog flat.
Som du kan se, når værdien ændres til flat, stables de underordnede elementer ikke længere i henhold til translateZværdierne (i 3D-rum), men i stedet flader de ud for at vises, som elementerne som standard er på en HTML-side.
Browsersupport
| Chrome | Safari | Firefox | Opera | IE | Android | iOS |
|---|---|---|---|---|---|---|
| 12+ | 4+ | 10+ | 15+ | Ingen | 3.0+ | 3.2+ |
Alle browsere kræver leverandørpræfikser undtagen Firefox 16+. Opera bruger -webkit-fra version 15 og Blink-konverteringen.
IE10 understøtter 3D-transformationer, men understøtter ikke transform-styleejendommen.