transform-styleBir elemanın uygulandığında o elementin çocukları 3D alanında bir konuma sahip olan veya düzleştirilmiş takdirde maddi, belirler.
.parent ( transform-style: preserve-3d; )İki değerden birini kabul eder: flat(varsayılan) ve preserve-3d. İki değer arasındaki farkı göstermek için, aşağıdaki CodePen'deki geçiş düğmesine tıklayın:
Düğme tıklandığında demo, transform-styledeğeri preserve-3dve arasında geçiş yapmak için JavaScript kullanır flat.
Gördüğünüz gibi, değer olarak değiştirildiğinde flat, alt öğeler artık translateZdeğerlere göre (3B alanda) yığınlanmaz , bunun yerine öğelerin varsayılan olarak bir HTML sayfasında göründüğü şekilde düzleştirilir.
Tarayıcı Desteği
| Krom | Safari | Firefox | Opera | IE | Android | iOS |
|---|---|---|---|---|---|---|
| 12+ | 4+ | 10+ | 15+ | Yok | 3.0+ | 3.2+ |
Firefox 16+ hariç tüm tarayıcılar, satıcı önekleri gerektirir. Opera -webkit-, sürüm 15 ve Blink dönüşümünden itibaren kullanır.
IE10, 3B dönüştürmeleri destekler ancak transform-styleözelliği desteklemez .