Preoblikovalni slog - CSS-triki

Kazalo

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:

Oglejte si to pisalo!

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 .

Zanimive Članki...