MoreLesson 188Preview gratis
Flip Card
Lesson ini bagian dari How To · Semua level
Ringkasan
Pelajaran ini membahas flip card, yaitu kartu yang berputar untuk menampilkan sisi belakang saat di-hover atau difokuskan. Efek tiga dimensi dibuat dengan perspective pada kontainer, transform-style: preserve-3d, dan backface-visibility: hidden pada kedua sisi. Karena hover tidak tersedia di semua perangkat, sediakan juga pemicu klik atau fokus keyboard.
Poin kunci
- Beri perspective pada pembungkus agar rotasi terlihat sebagai efek tiga dimensi
- Gunakan transform-style: preserve-3d pada elemen dalam yang berputar
- Sembunyikan sisi belakang dengan backface-visibility: hidden dan rotasi awal 180 derajat
- Sediakan pemicu fokus atau klik serta opsi reduced motion untuk aksesibilitas
Materi lengkap
Contoh kode dan kuis
Materi lengkap, contoh kode, dan kuis tersedia untuk pelanggan. 5 soal.