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 langsun...

Membalik Gambar CSS3

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>&nbsp;</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>&nbsp;</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...

About Author

Mohammad Nur Huda

Masih menjadi newbie di sela-sela orang penting, mencoba dan berharap dapat sebagaian ilmu dari mereka . . . :-)


Comment & Discussions

    Please LOGIN before if you want to give the comment.