Die transform-styleEigenschaft, wenn auf ein Element angewendet wird , bestimmt , ob das Element der Kinder im 3D - Raum positioniert sind, oder abgeflacht.
.parent ( transform-style: preserve-3d; )Es akzeptiert einen von zwei Werten: flat(Standard) und preserve-3d. Um den Unterschied zwischen den beiden Werten zu demonstrieren, klicken Sie im CodePen unten auf die Umschaltfläche:
Wenn Sie auf die Schaltfläche klicken, verwendet die Demo JavaScript, um den transform-styleWert zwischen preserve-3dund umzuschalten flat.
Wie Sie sehen, werden flatdie untergeordneten Elemente beim Ändern des Werts nicht mehr gemäß den translateZWerten (im 3D-Raum) gestapelt , sondern abgeflacht, um so zu erscheinen, wie Elemente standardmäßig auf einer HTML-Seite sind.
Browser-Unterstützung
| Chrom | Safari | Feuerfuchs | Oper | IE | Android | iOS |
|---|---|---|---|---|---|---|
| 12+ | 4+ | 10+ | 15+ | Keiner | 3.0+ | 3.2+ |
Für alle Browser sind Herstellerpräfixe erforderlich, mit Ausnahme von Firefox 16+. Opera verwendet -webkit-ab Version 15 und die Blink-Konvertierung.
IE10 unterstützt 3D-Transformationen, unterstützt jedoch nicht die transform-styleEigenschaft.