De transform-styleeigenschap, wanneer toegepast op een element, bepaalt of de onderliggende elementen van dat element in 3D-ruimte worden geplaatst of worden afgevlakt.
.parent ( transform-style: preserve-3d; )Het accepteert een van de twee waarden: flat(de standaardinstelling) en preserve-3d. Om het verschil tussen de twee waarden aan te tonen, klikt u op de schakelknop in de CodePen hieronder:
Wanneer op de knop wordt geklikt, gebruikt de demo JavaScript om de transform-stylewaarde tussen preserve-3den te wisselen flat.
Zoals u kunt zien, wanneer de waarde wordt gewijzigd in flat, worden de onderliggende elementen niet langer gestapeld volgens de translateZwaarden (in 3D-ruimte), maar in plaats daarvan afgevlakt zodat ze verschijnen zoals elementen standaard zijn op een HTML-pagina.
Browser-ondersteuning
| Chrome | Safari | Firefox | Opera | D.W.Z | Android | iOS |
|---|---|---|---|---|---|---|
| 12+ | 4+ | 10+ | 15+ | Geen | 3.0+ | 3.2+ |
Alle browsers vereisen prefixen van leveranciers, behalve Firefox 16+. Opera gebruikt -webkit-vanaf versie 15 en de Blink-conversie.
IE10 ondersteunt 3D-transformaties, maar ondersteunt de transform-styleeigenschap niet.