Hover Putar CSS3 Oleh: Mohammad Nur Huda Assallamualaikum... Haha... Sebenarnya ini adalah tulisan pertama saya pada situs berbagi ilmu ini :-). Pada kali ini kita akan membuat efek hover memutarkan objek dengan memanfaatkan property transform tepatnya transform rotate untuk membuat efek berputar dan property transition untuk menentukan waktu animasi yang kita buat... Assallamualaikum... Haha... Sebenarnya ini adalah tulisan pertama saya pada situs berbagi ilmu ini :-). Pada kali ini kita akan membuat efek hover memutarkan objek dengan memanfaatkan property transform tepatnya transform rotate untuk membuat efek berputar dan property transition untuk menentukan waktu animasi yang kita buat tadi... Bismillahirohmanirohim... Oke sekarang langsung kita praktekan bersama sama... :-) Pertama-tama buka notepad bawaan windows, kenapa kita pake notepad bawaan windows.? Karena untuk memahami struktur code yang mendasar kita harus mandiri tanpa bantuan code hinting ataupun autocomplete seperti fungsi yang ada di dreamwever, sublime, maupun notepad++. Lalu kita buat struktur htmlnya dengan mengetik baris kode berikut... <!DOCTYPE html> <html> <head> <title> </title> <style> </style> </head> <body> </body>
</html> Didalam tag <style></style> kita buat class dengan nama putar, seperti berikut....putar { Dan dibawah baris class tersebut buat pula pseudo-class untuk hovernya....putar:hover { Kita buat parameter codenya di class putar, baris demi baris sebagai berikut agar kita dapat memahaminya... height: 125px; width: 125px; ( kita buat panjang dan lebarnya bernilai 125px X 125px atau ukuran yang lain dengan nilai panjang dan lebarnya yang sama ) Lalu di bawahnya kita beri jarak dengan nilai seperti berikut... padding: 4px; margin: 15px 0 0 15px; ( oke kita beri nilai padding dengan nilai 4px dan margin bernilai 15px 0 0 15px ) Bagi yang belum tau apa itu padding dan margin ini penjelasan singkatnya => padding itu jarak yang di ambil dari sisi dalam objek sedangkan margin itu sebaliknya yaitu jarak yang di ambil dari sisi luar objek ke objek itu sendiri Lalu kita beri border dengan warna biru racikan saya sendiri, hehe.. border: 3px solid #c0392b; Untuk memberi bentuk bundar pada objek kita beri border-radius dengan nilai 50%, kenapa 50% karena jika tiap sudut objek bernilai 50% pada setiap sisinya maka tiap-tiap sudut lengkungnya akan bertemu hal ini menyebabkan objek berbentuk bundar, berikut parameternya... border-radius: 50%; Terakhir kita beri timing dengan memakai propery transition dengan, sebagai berikut...
transition: all 0.5s ease-in-out; ( kita beri waktu setengah detik atau bisa dibilang 0.5 second dengan efek percepatan ease-in-out ) Untuk pseudo-class hovernya, kita beri parameter seperti berikut... Pertama kita buat border untuk objeknya seperti tadi dengan warna berbeda, yaitu warna merah... border: 3px solid #4183d7; Dan kita beri property transition seperti yang ada di class putar tadi, seperi ini... transition: all 0.5s ease-in-out; Sekarang kita beri propery transform, seperti ini... transform: scale(1.2) rotate(360deg); ( nilai scale bernilai 1.2 berarti objek tersebut membesar 1.2 kali dari objek sebelumnya pada posisi hover dan rotate bernilai 360 degree berarti objek tersebut akan berputar 360 dreajat ke arah kanan karena nilainya positif ) Terakhir kita beri efek bayangan dengan property box-shadow, seperti berikut.. box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1); Lalu kita beri gambar sebagai objek yang akan kita jadikan objek animasinya, pada tag body... <img class="putar" src="1.png"/> ( kita beri deklarasikan atribut class dengan nama putar dan kita beri atribut src atau tempat direktori gambar yang dimaksud ) Jadi keseluruhan codenya, seperti ini... <!DOCTYPE html> <html> <head> <title> </title> <style>.putar { height: 125px; width: 125px; padding: 4px; margin: 15px 0 0 15px; border: 3px solid #c0392b; border-radius: 50%;
transition: all 0.5s ease-in-out;.putar:hover { border: 3px solid #4183d7; transition: all 0.5s ease-in-out; transform: scale(1.2) rotate(360deg); box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1); </style> </head> <body> <img class="putar" src="1.png"/> </body> </html> Atau versi demonya... Sekian tutorial dari saya, sampai jumpa pada tutorial selanjutnya dari saya... :-) Stay coding dan don t afraid about debuging... Tentang Penulis Mohammad Nur Huda Masih menjadi newbie di sela-sela orang penting, mencoba dan berharap dapat sebagaian ilmu dari mereka... :-)