A transform-styletulajdonság egy elemre alkalmazva meghatározza, hogy az elem gyermekei a 3D-s térben helyezkednek-e el, vagy ellapultak-e.
.parent ( transform-style: preserve-3d; )A két érték egyikét elfogadja: flat(az alapértelmezett) és preserve-3d. A két érték közötti különbség bemutatásához kattintson a váltógombra az alábbi CodePen-ben:
A gombra kattintva a demo a JavaScript használatával váltja az transform-styleértéket preserve-3dés között flat.
Amint láthatja, amikor az értékre változik flat, a gyermekelemek már nem az translateZértékek szerint vannak elhelyezve (3D térben), hanem ellaposodnak, és úgy jelennek meg, ahogy az alapértelmezés szerint egy HTML-oldalon található.
Böngésző támogatás
| Króm | Szafari | Firefox | Opera | AZAZ | Android | iOS |
|---|---|---|---|---|---|---|
| 12+ | 4+ | 10+ | 15+ | Egyik sem | 3.0+ | 3.2+ |
Minden böngésző szállító előtagokat igényel, a Firefox 16+ kivételével. Az Opera a -webkit-15. verziótól kezdve a Blink konverziót használja.
Az IE10 támogatja a 3D átalakításokat, de nem támogatja a transform-styletulajdonságot.