The transform-styleharta, apabila digunakan untuk unsur, menentukan jika anak-anak bahawa elemen ini berada pada kedudukan dalam ruang 3D, atau diratakan.
.parent ( transform-style: preserve-3d; )Ia menerima satu daripada dua nilai: flat(lalai) dan preserve-3d. Untuk menunjukkan perbezaan antara dua nilai, klik butang togol di CodePen di bawah:
Apabila butang diklik, demo menggunakan JavaScript untuk menukar transform-stylenilai antara preserve-3ddan flat.
Seperti yang anda lihat, ketika nilainya ditukar menjadi flat, elemen anak tidak lagi ditumpuk sesuai dengan translateZnilainya (dalam ruang 3D), tetapi meratakan untuk muncul seperti elemen secara lalai pada halaman HTML.
Sokongan Penyemak Imbas
| Chrome | Safari | Firefox | Opera | IE | Android | iOS |
|---|---|---|---|---|---|---|
| 12+ | 4+ | 10+ | 15+ | Tiada | 3.0+ | 3.2+ |
Semua penyemak imbas memerlukan awalan vendor, kecuali Firefox 16+. Opera menggunakan -webkit-versi 15 dan penukaran Blink.
IE10 menyokong transformasi 3D, tetapi tidak menyokong transform-styleharta tanah.