Fungsi dari properties Transform itu sendiri yaitu untuk membuat sebuah animasi sederhana pada website , dan transition itu fungsinya untuk memberikan timing atau proses dimana obyek kita dijalankan , untuk sebagai contoh kita akan membuat obyek gambar menjadi berputar , coba teman teman siapkan terlebih dahulu sebuah gambar , disini saya menggunakan gambar seperti di bawah ini :

page2-img6

 

 

oke saya akan membuat obyek itu berputar , coba teman teman masukan struktur HTML di bawah ini :

2 september 2015 - 1

jika sudah , masukan fungsi dari CSS nya , disini kita pake internal style , karena Markup nya yang tidak terlalu banyak :

2 september 2015 - 2

jika sudah coba teman teman jalankan di browsernya , oke untuk penjelasannya :

1. yang saya beri warna merah yaitu ada properties transform dan transition pada selector img:hover , dimana disitu kita memberikan style pada gambar yaitu animasi berputar 180deg dengan timing 1 second.

2. yang saya beri warna kuning pada selector img yaitu pengembalian sesaat setelah di hover , setelah saya hover 180deg lalu saya balikan kembali ke awal dengan -180deg dengan timing yang sama yaitu 1s.

semoga bermanfaat 😀