transform-styleMajetku, keď je aplikovaný na prvok určuje, či sa deti tento prvok sú umiestnené v 3D priestore, alebo sploštený.
.parent ( transform-style: preserve-3d; )Prijíma jednu z dvoch hodnôt: flat(predvolená) a preserve-3d. Ak chcete demonštrovať rozdiel medzi týmito dvoma hodnotami, kliknite na prepínač v CodePen nižšie:
Po kliknutí na tlačidlo sa v ukážke pomocou jazyka JavaScript prepína transform-stylehodnota medzi preserve-3da flat.
Ako vidíte, keď sa hodnota zmení na flat, podradené prvky sa už nebudú ukladať podľa translateZhodnôt (v 3D priestore), ale namiesto toho sa sploštia, aby sa na stránke HTML zobrazili tak, ako sú prvky v predvolenom nastavení.
Podpora prehľadávača
| Chrome | Safari | Firefox | Opera | IE | Android | iOS |
|---|---|---|---|---|---|---|
| 12+ | 4+ | 10+ | 15+ | Žiadne | 3,0+ | 3,2+ |
Všetky prehliadače vyžadujú predponu dodávateľa, s výnimkou prehliadača Firefox 16+. Opera používa -webkit-od verzie 15 a konverziu Blink.
IE10 podporuje 3D transformácie, ale nepodporuje túto transform-stylevlastnosť.