MoreLesson 239Preview gratis
Flip Box
Lesson ini bagian dari How To · Semua level
Ringkasan
Flip box adalah kartu dua sisi yang berputar 180 derajat saat hover atau diklik. Efek ini dibangun dengan perspective pada container, transform-style: preserve-3d pada kartu, dan backface-visibility: hidden agar sisi belakang tidak tembus pandang. Sisi depan dan belakang ditumpuk, lalu sisi belakang diputar sebagai kondisi awal.
Poin kunci
- perspective pada parent memberi kedalaman 3D; nilai sekitar 600-1200px terasa wajar.
- transform-style: preserve-3d menjaga anak elemen tetap berada dalam ruang 3D.
- backface-visibility: hidden menyembunyikan sisi yang membelakangi layar.
- Sisi belakang diberi rotateY(180deg) sebagai kondisi awal, lalu kartu induk diputar saat hover.
Materi lengkap
Contoh kode dan kuis
Materi lengkap, contoh kode, dan kuis tersedia untuk pelanggan. 5 soal.