Memutar Balikkan Gambar Dengan CSS


Memutar Balikkan Gambar Dengan CSS

Assalamualaikum Wr. Wb.
Pada pembahasan lalu kita membahas Membuat Font Awesome Animasi Dengan JavaScript, sekarang saya ingin membahas cara memutar gambar yang rotasi putarnya dengan menggunakan sumbu Y sebagai sumbunya. Oke sekarang langsung aja kita praktekkan, yuk disimak :)

Pertama copy dan pastekkan kode berikut sebelum </head>

.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);
}

 

Ini menjelaskan sebagai class, jadi ketika memanggilnya kita harus menyebutkan kata putar

.putar:hover {

}

 

Begini cara memanggilnya

<img class="putar" src="link gambar"/>

 

Maka akan menjadi seperti ini jadinya

 

 

Gimana? mudahkan? selamat mencoba :)

Wassalmualaikum Wr. Wb.


http://short.erllang.ga/csI6S

Suka Dengan Artikel ini? Bagikan!  
Facebook Twitter Google+ LINE WhatsApp
Komentar pada “ Memutar Balikkan Gambar Dengan CSS