transform-styleNuosavybė, kai kreipėsi į elemento, nustato, ar šis elementas vaikai yra išdėstyti 3D erdvėje, ar paplokščias.
.parent ( transform-style: preserve-3d; )Ji priima vieną iš dviejų reikšmių: flat(numatytoji) ir preserve-3d. Norėdami parodyti šių dviejų verčių skirtumą, spustelėkite perjungimo mygtuką toliau pateiktame „CodePen“:
Spustelėjus mygtuką, demonstracinė versija naudoja „JavaScript“, kad transform-stylereikšmę pakeistų tarp preserve-3dir flat.
Kaip matote, kai vertė pakeičiama į flat, antriniai elementai nebėra sukrauti pagal translateZvertes (3D erdvėje), o išlyginami, kad HTML puslapyje būtų rodomi elementai pagal numatytuosius nustatymus.
Naršyklės palaikymas
| „Chrome“ | „Safari“ | „Firefox“ | Opera | T.Y | „Android“ | „iOS“ |
|---|---|---|---|---|---|---|
| 12+ | 4+ | 10+ | 15+ | Nė vienas | 3,0+ | 3.2+ |
Visoms naršyklėms reikalingi tiekėjo priešdėliai, išskyrus „Firefox 16+“. „Opera“ naudoja -webkit-nuo 15 versijos ir „Blink“ konversiją.
IE10 palaiko 3D transformacijas, bet nepalaiko transform-stylenuosavybės.