CSS AdvancedLesson 58Preview gratis
CSS 3D Transforms
Lesson ini bagian dari CSS · Semua level
Ringkasan
Transform 3D menambahkan sumbu kedalaman (Z) sehingga elemen bisa diputar seperti kartu atau kotak. Agar anak-anak elemen ikut berada dalam ruang 3D yang sama, induknya perlu `transform-style: preserve-3d`. Properti `perspective` menentukan seberapa kuat kesan kedalaman pada elemen.
Poin kunci
- Sumbu Z positif mengarah ke arah pengguna, negatif menjauh ke belakang
- `rotateX`, `rotateY`, `rotateZ` memutar elemen pada masing-masing sumbu
- `perspective` pada induk membuat efek foreshortening seperti mata manusia
- `transform-style: preserve-3d` membuat anak elemen tetap di ruang 3D induk
Materi lengkap
Contoh kode dan kuis
Materi lengkap, contoh kode, dan kuis tersedia untuk pelanggan. 5 soal.