Hallo teman-teman,kali ini kita akan belajar cara membuat flip card dengan CSS3. Flip card ini berguna untuk memberikan informasi dengan lebih interaktif dan terlihat lebih keren. Sehingga pengunjung website akan merasa tertarik dengan website kita.

Ada beberapa fungsi css yang akan kita gunakan pada praktek kali ini. Disini kita akan menggunakan fungsi transform: rotate();. Fungsi transform ini akan membantu teman-teman untuk memutarkan objek, pada contoh kali ini kita gabung dengan fungsi transition: sehingga saat memutarkan objek ada sedikit gerakan slow motion yang terlihat seperti animasi. Langsung saja teman-teman buat dahulu file htmlnya seperti ini.

index.html

lalu buat file cssnya seperti ini

style.css

Jika sudah maka teman-teman coba buka di browsernya dan lihat hasilnya.

3 5

4 6

Nanti teman-teman bisa tambahkan sendiri pada isi dari flip card tersebut dengan gambar atau informasi menarik lainya.

Sekian pembelajaran mengenai cara membuat flip card dengan CSS3. Semoga bermanfaat.