Haloo teman-teman Dumet School. Kembali lagi dengan saya Shelli Ripati di Kursus Web Design. Kali ini saya akan membahas tentang cara Membuat Animasi Flip Pada Gambar Saat Di Hover. Flip adalah membuat posisi gambar terbalik. Nah kali ini saya akan membuat posisi gambar terbalik saat di hover.

Pertama teman-teman buat struktur htmlnya terlebih dahulu ya untuk Membuat Animasi Flip Pada Gambar Saat Di Hover. Scriptnya seperti di bawah ini ya teman-teman.

Jika sudah selesai, teman-teman bisa membuat style cssnya dan berikut scriptnya .

Nah, teman-teman bisa perhatikan style css di atas pada bagian hover. Disini saya menggunkan property transform. Dimana properti transformasi menerapkan transformasi 2D atau 3D ke elemen. Properti ini memungkinkan kita untuk membuat efek animasi memutar, skala, bergerak, condong, dan lain-lain terhadap suatu elemen. Berikut nilain-nilai dari properti transform:

  • Matrix : berfungsi untuk menggabungkan beberapa transform lainnya. Seperti gabungkan rotate, skew, dan scale menjadi satu.·
  • translate: berfungsi untuk memindahkan objek atau elemen ke posisi yang anda inginkan.·
  • scale : berfungsi untuk merubah ukuran suatu elemen berdasarkan skala. Ukuran normal dari elemen adalah 1, untuk mengecilkan elemen anda bisa gunakan nilai di bawahnya dan untuk memperbesar anda bisa menggunakan nilai di atasnya.·
  • Rotate : berfungsi untuk memutar elemen sesuai dengan derajat yang diberikan. Nilai untuk fungsi ini memiliki satuan deg, nilai positif akan memutar elemen searah jarum jam, dan nilai negatif akan memutarnya berlawanan arah jarum jam.·
  • Skew : berfungsi untuk menciptakan efek condong pada suatu elemen ke sumbu X atau sumbu Y.

Nah, teman-teman bisa langsung buka di browser masing-masing. Jika teman-teman hover maka gambar akan terbalik sesuai sumbu yang kita berikan pada nilai scale.

Demikian artikel tentang cara Membuat Animasi Flip Pada Gambar Saat Di Hover. Semoga bermanfaat dan selamat mencoba ya teman-teman.