transform-styleOminaisuus, kun sitä sovelletaan elementti, määrittää, onko tämä osa lapset on sijoitettu 3D-avaruudessa, tai litistetty.
.parent ( transform-style: preserve-3d; )Se hyväksyy yhden kahdesta arvosta: flat(oletus) ja preserve-3d. Osoita kahden arvon välinen ero napsauttamalla alla olevaa CodePen-laitteen vaihtopainiketta:
Kun painiketta napsautetaan, esittely vaihtaa transform-stylearvon välillä preserve-3dja flat.
Kuten näette, kun arvoksi vaihdetaan flat, alielementtejä ei enää pinota translateZarvojen mukaan (3D-tilassa), vaan ne litistyvät, jotta ne näkyvät HTML-sivulla oletusarvoisesti.
Selaimen tuki
| Kromi | Safari | Firefox | Ooppera | IE | Android | iOS |
|---|---|---|---|---|---|---|
| 12+ | 4+ | 10+ | 15+ | Ei mitään | 3.0+ | 3.2+ |
Kaikki selaimet edellyttävät toimittajan etuliitteitä, paitsi Firefox 16+. Opera käyttää -webkit-versiosta 15 ja Blink-muunnosta.
IE10 tukee 3D-muunnoksia, mutta ei tue transform-styleominaisuutta.