Den transform-styleegenskap, når den brukes til et element bestemmer om at elementets barn er plassert i 3D-rom, eller avflatet.
.parent ( transform-style: preserve-3d; )Den godtar en av to verdier: flat(standard) og preserve-3d. For å demonstrere forskjellen mellom de to verdiene, klikk på veksleknappen i CodePen nedenfor:
Når du klikker på knappen, bruker demoen JavaScript for å veksle transform-styleverdien mellom preserve-3dog flat.
Som du kan se, når verdien endres til flat, stables ikke underelementene lenger i samsvar med translateZverdiene (i 3D-rom), men i stedet flatt ut for å vises slik elementene er som standard på en HTML-side.
Nettleserstøtte
| Chrome | Safari | Firefox | Opera | DVS | Android | iOS |
|---|---|---|---|---|---|---|
| 12+ | 4+ | 10+ | 15+ | Ingen | 3.0+ | 3.2+ |
Alle nettlesere krever leverandørprefikser, unntatt Firefox 16+. Opera bruker -webkit-fra versjon 15 og Blink-konverteringen.
IE10 støtter 3D-transformasjoner, men støtter ikke transform-styleeiendommen.