transform-styleVara, kui seda kohaldada element määrab, kas see element laste paiknevad 3D ruumi või lapik.
.parent ( transform-style: preserve-3d; )See aktsepteerib ühte kahest väärtusest: flat(vaikimisi) ja preserve-3d. Nende kahe väärtuse erinevuse demonstreerimiseks klõpsake allpool asuvas CodePenis lülitusnuppu:
Kui nupul klõpsatakse, kasutab demo transform-styleväärtuse preserve-3dja vahel vahetamiseks JavaScripti flat.
Nagu näete, ei muudeta alamelemente väärtuse muutmise korral flatenam translateZväärtuste järgi (3D-ruumis), vaid tasandatakse, et need ilmuksid HTML-lehel vaikimisi.
Brauseri tugi
| Chrome | Safari | Firefox | Ooper | IE | Android | iOS |
|---|---|---|---|---|---|---|
| 12+ | 4+ | 10+ | 15+ | Puudub | 3,0+ | 3,2+ |
Kõik brauserid vajavad hankija eesliiteid, välja arvatud Firefox 16+. Opera kasutab -webkit-alates versioonist 15 ja konversiooni Blink.
IE10 toetab 3D-teisendusi, kuid ei toeta seda transform-styleomadust.