Assallamualaikum...
Kembali lagi bersama saya Mazhuda... :-)
Pada tutorial lalu kita membahas cara membuat hover berefek putar sekarang hampir sama dengan yang lalu namun kali ini kita akan membuat rotasi putar dengan menggunakan sumbu Y sebagai sumbunya, itu berarti kita sudah membuat efek 3D... Haha...
Oke sekarang langsung saja kita praktekkan... :-)
Siapkan dulu pakai notepad bawaan windows buat ngerjai’innya...
Lalu buat struktur htmlnya dengan mengetik baris kode berikut...
<!DOCTYPE html> <html> <head> <title> </title> <style> </style> </head> <body> </body> </html>
Kita isi tag stylenya, 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: 150px; width: 150px;
( kita buat panjang dan lebarnya bernilai 150px X 150px 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 itu berarti top, right, bottom, dan leftnya bernilai 4px dan margin bernilai 15px 0 0 15px )
Lalu kita beri border dengan ukuran 1px, berstyle solid, dan berwarna abu-abu...
border: 1px solid #ddd;
Agar lebih elegan kita beri pigiran objek bersudut lengkung...
border-radius: 4px;
Terakhir kita beri propery transition sebagai berikut...
transition: all 2.5s;
( kita beri waktu dua setengah detik atau bisa dibilang 2.5 second )
Terakhir kita beri efek bayangan dengan property box-shadow, seperti berikut...
box-shadow: 0 3px 7px rgba(0, 0, 0, 0.3);
Untuk pseudo-class hovernya, kita beri parameter seperti berikut...
Buat property transition seperti yang ada di class putar tadi, seperi ini...
transition:all 2.5s;
Sekarang kita beri propery transform, seperti ini...
transform: rotateY(180deg);
( parameter rotateY merupakan fungsi untuk memutar objek dengan sumbu Y sebagai acuannya, dan bernilai 180deg berarti untuk memutarnya 180 derajat kearah kanan )
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: 150px;
width: 150px;
padding: 4px;
margin: 15px 0 0 15px;
border: 1px solid #ddd;
border-radius: 4px;
transition: all 2.5s;
box-shadow: 0 3px 7px rgba(0, 0, 0, 0.3);
}
.putar:hover {
transition: all 2.5s;
transform: rotateY(180deg);
}
</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...
