transform-styleImovine, kada se primjenjuju na element, utvrđuje da su djeca tom elementu je smještena u 3D prostoru, ili spljoštene.
.parent ( transform-style: preserve-3d; )Prihvaća jednu od dvije vrijednosti: flat(zadana) i preserve-3d. Da biste pokazali razliku između dvije vrijednosti, kliknite gumb za prebacivanje u CodePenu u nastavku:
Kada se klikne gumb, demonstracija koristi JavaScript za prebacivanje transform-stylevrijednosti između preserve-3di flat.
Kao što vidite, kada se vrijednost promijeni u flat, podređeni elementi više se ne slažu prema translateZvrijednostima (u 3D prostoru), već se izravnavaju kako bi se prikazali onako kako su elementi zadani na HTML stranici.
Podrška preglednika
| Krom | Safari | Firefox | Opera | IE | Android | iOS |
|---|---|---|---|---|---|---|
| 12+ | 4+ | 10+ | 15+ | Nijedna | 3,0+ | 3,2+ |
Svi preglednici zahtijevaju prefikse dobavljača, osim Firefoxa 16+. Opera koristi -webkit-verziju 15 i pretvorbu Blink.
IE10 podržava 3D transformacije, ali ne podržava transform-stylesvojstvo.