transform-styleLastnine, kadar se uporablja za element, določa, če so otroci Ta element je postavljen v 3D prostoru, ali sploščen.
.parent ( transform-style: preserve-3d; )Sprejema eno od dveh vrednosti: flat(privzeto) in preserve-3d. Če želite prikazati razliko med obema vrednostma, kliknite preklopni gumb v CodePenu spodaj:
Ko kliknete gumb, predstavitev uporablja JavaScript za preklapljanje transform-stylevrednosti med preserve-3din flat.
Kot lahko vidite, se ob spremembi vrednosti flatpodrejeni elementi ne zložijo več glede na translateZvrednosti (v 3D prostoru), temveč se poravnajo, da se prikažejo na način, ki je privzeto na strani HTML.
Podpora za brskalnik
| Chrome | Safari | Firefox | Opera | IE | Android | iOS |
|---|---|---|---|---|---|---|
| 12+ | 4+ | 10+ | 15+ | Nobenega | 3.0+ | 3,2+ |
Vsi brskalniki zahtevajo predpone ponudnikov, razen Firefoxa 16+. Opera uporablja -webkit-različico 15 in pretvorbo Blink.
IE10 podpira 3D-pretvorbe, vendar transform-stylelastnosti ne podpira .