The transform-styleproperti, bila diterapkan pada elemen, menentukan apakah anak-anak yang elemen diposisikan dalam ruang 3D, atau diratakan.
.parent ( transform-style: preserve-3d; )Ini menerima salah satu dari dua nilai: flat(default) dan preserve-3d. Untuk mendemonstrasikan perbedaan antara dua nilai, klik tombol sakelar di CodePen di bawah ini:
Saat tombol diklik, demo menggunakan JavaScript untuk mengalihkan transform-stylenilai antara preserve-3ddan flat.
Seperti yang Anda lihat, ketika nilai diubah menjadi flat, elemen turunan tidak lagi ditumpuk sesuai dengan translateZnilai (dalam ruang 3D), tetapi diratakan agar muncul seperti elemen secara default pada halaman HTML.
Dukungan Browser
| Chrome | Safari | Firefox | Opera | YAITU | Android | iOS |
|---|---|---|---|---|---|---|
| 12+ | 4+ | 10+ | 15+ | Tidak ada | 3.0+ | 3.2+ |
Semua browser membutuhkan prefiks vendor, kecuali Firefox 16+. Opera menggunakan -webkit-pada versi 15 dan konversi Blink.
IE10 mendukung transformasi 3D, tetapi tidak mendukung transform-styleproperti.