Den transform-styleegenskapen, när de appliceras på ett element, avgör om det elementet barn placeras i 3D-rymden, eller tillplattad.
.parent ( transform-style: preserve-3d; )Den accepterar ett av två värden: flat(standard) och preserve-3d. För att visa skillnaden mellan de två värdena, klicka på växlingsknappen i CodePen nedan:
När du klickar på knappen använder demo JavaScript för att växla transform-stylevärdet mellan preserve-3doch flat.
Som du kan se, när värdet ändras till flat, staplas inte de underordnade elementen längre enligt translateZvärdena (i 3D-utrymme) utan istället plattas ut för att se ut som elementen är som standard på en HTML-sida.
Webbläsarstöd
| Krom | Safari | Firefox | Opera | IE | Android | iOS |
|---|---|---|---|---|---|---|
| 12+ | 4+ | 10+ | 15+ | Ingen | 3.0+ | 3.2+ |
Alla webbläsare kräver leverantörsprefix, utom Firefox 16+. Opera använder -webkit-från version 15 och Blink-konverteringen.
IE10 stöder 3D-omvandlingar, men stöder inte transform-styleegenskapen.