transform-styleNieruchomość, po nałożeniu na element określa, czy dzieci tego elementu są umieszczone w przestrzeni 3D lub spłaszczone.
.parent ( transform-style: preserve-3d; )Akceptuje jedną z dwóch wartości: flat(domyślna) i preserve-3d. Aby zademonstrować różnicę między tymi dwiema wartościami, kliknij przycisk przełączania w CodePen poniżej:
Po kliknięciu przycisku wersja demonstracyjna używa JavaScript do przełączania transform-stylewartości między preserve-3da flat.
Jak widać, po zmianie wartości na flat, elementy potomne nie są już układane w stos zgodnie z translateZwartościami (w przestrzeni 3D), ale zamiast tego są spłaszczane, aby wyglądały tak, jak elementy są domyślnie na stronie HTML.
Wsparcie przeglądarki
| Chrom | Safari | Firefox | Opera | TO ZNACZY | Android | iOS |
|---|---|---|---|---|---|---|
| 12+ | 4+ | 10+ | 15+ | Żaden | 3.0+ | 3.2+ |
Wszystkie przeglądarki wymagają prefiksów dostawców, z wyjątkiem Firefox 16+. Opera używa -webkit-wersji 15 i konwersji Blink.
IE10 obsługuje transformacje 3D, ale nie obsługuje tej transform-stylewłaściwości.