Properti transform-style menentukan apakah anak-anak elemen diposisikan dalam ruang tiga dimensi atau diratakan dalam bidang dua dimensi elemen.
Sebagian besar digunakan ketika transformasi bersarang. Artinya, dapat digunakan untuk melestarikan ruang tiga dimensi dari elemen yang ditransformasikan dalam ruang tiga dimensi induknya. Lihat bagian demo langsung di bawah untuk contoh.
Dibutuhkan salah satu dari dua nilai: flat dan preserve-3d. Value Preserve-3d akan memungkinkan anak-anak elemen diposisikan dalam ruang tiga dimensi. Nilai flat, seperti namanya, akan meratakan elemen ke dalam bidang induknya, tidak memungkinkan mereka diposisikan di sepanjang sumbu z.
Nilai selain preserve-3d menetapkan konteks penumpukan.
Trivia & Catatan
Nilai properti CSS berikut mengharuskan agen pengguna untuk membuat representasi elemen turunan yang rata sebelum dapat diterapkan, dan karenanya menimpa perilaku gaya transformasi: preserve-3d:
- overflow dengan nilai apa pun selain yang terlihat.
- filter dengan nilai apa pun selain tidak ada.
- clip dengan nilai apa pun selain otomatis.
- clip-path dengan nilai apa pun selain tidak ada.
- isolation dengan nilai isolat yang digunakan.
- mask-image dengan nilai apa pun selain tidak ada.
- mask-box-source dengan nilai apa pun selain tidak ada.
- mix-blend-mode dengan nilai apa pun selain normal
Jadi, jika Kalian ingin memposisikan elemen dalam ruang tiga dimensi dan mengatur properti gaya transformasi dengan benar, pastikan wadah elemen yang ingin Anda ubah tidak memiliki properti di atas yang disetel dengan nilai yang disebutkan.
Properti transform-style tidak diwarisi. Oleh karena itu, Anda harus menggunakannya pada keturunan mana pun yang anak-anaknya ingin Anda ubah dalam ruang tiga dimensi.
Official Syntax
- Syntax:
1transform-style: <span class="hljs-keyword">flat</span> | preserve<span class="hljs-number">-3</span>d - Initial: flat
- Applies To: transformable elements
- Animatable: no
Values:
flat: Ratakan anak-anak elemen sehingga mereka berbaring di bidang elemen itu sendiri.
preserve-3d: Mengizinkan anak-anak elemen harus diposisikan di ruang tiga dimensi.
Contohnya
Pada contoh berikut, elemen .transformasi di dalam .containernya. Ini memiliki transformasi-gaya: melestarikan-3d ditetapkan karena anaknya (img) juga diposisikan dalam ruang tiga dimensi. Anda dapat melihat demo langsung dari contoh ini di bagian demo langsung di bawah ini.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
.container { /* activate 3D space */ perspective: 800px; } .element { width: 100%; height: 400px; background-color: rgba(255, 255, 255, 0.8); /* transform */ transform: rotateY(50deg); /* allow direct descendants to be transformed */ transform-style: preserve-3d; } .element img { transform: rotateX(-30deg); } |