transform-styleMajetku, když je aplikován na prvek určuje, zda se děti tento prvek jsou umístěny v 3D prostoru, nebo zploštělý.
.parent ( transform-style: preserve-3d; )Přijímá jednu ze dvou hodnot: flat(výchozí) a preserve-3d. Chcete-li demonstrovat rozdíl mezi těmito dvěma hodnotami, klikněte na přepínací tlačítko v CodePen níže:
Když kliknete na tlačítko, demo pomocí JavaScriptu přepíná transform-stylehodnotu mezi preserve-3da flat.
Jak vidíte, když se hodnota změní na flat, podřízené prvky se již nebudou skládat podle translateZhodnot (v 3D prostoru), ale místo toho se zplošťují, aby se na stránce HTML zobrazovaly tak, jak jsou prvky ve výchozím nastavení.
Podpora prohlížeče
| Chrome | Safari | Firefox | Opera | TJ | Android | iOS |
|---|---|---|---|---|---|---|
| 12+ | 4+ | 10+ | 15+ | Žádný | 3,0+ | 3,2+ |
Všechny prohlížeče vyžadují předpony dodavatelů, kromě Firefoxu 16+. Opera používá -webkit-od verze 15 a konverzi Blink.
IE10 podporuje 3D transformace, ale nepodporuje tuto transform-stylevlastnost.