Hallo teman – teman berjumpa lagi dalam artikel dumetschool, pada pembahasan kali ini masih seputar tentang animasi CSS3.  Animasi CSS3 yang akan kita bahas pada kali ini adalah  animasi CSS3 transform, sebelum masuk pada pembahasan CSS3 alangkah baiknya teman – teman mengetahui terlebih dahulu apa itu CSS3 transform. CSS3 transform adalah property CSS yang digunakan untuk membuat sebauh efek animasi seperti memutar, merubah ukuran, memindahkan elemen HTML dan memeringkan sebuah elemen HTML.

Namun pada pembahasan kali ini saya akan membahas tentang CSS3 transform scale dan transform rotate. Fungsi transform rotate adalah untuk memutar sebuah elemen HTML sesuai yang diinginkan dan transform rotate mempunyai satuan (deg) sedangkan property CSS3 transform scale digunakan untuk merubah ukuran elemen sebuah HTML, Efek ini terjadi ketika elemen target diberi hover.

Oke untuk lebih jelas saya akan langsung memberikan contohnya,

penjelasan dari script HTML di atas:
dari script HTML di atas saya membuat sebuah kelas kotak dimana nantinya kelas kotak tersebut akan saya beri efek hover transform scale dan untuk kelas box saya akan beri  efek hover transform rotate.

Oke sekarang kita akan membuat sebuah css untuk HTML di atas, silahkan ikuti langkah – langkah di bawah ini:

Jika sudah maka coba teman – teman save dan jalan pada browser untuk melihat hasilnya. Oke cukup mudah bukan, semoga bermanfaat.