Cara Membuat Image Flip dengan jQuery CSS

Hallo sahabat dumenity berjumpa lagi dalam tutorial kursuswebdesign, pada tutorial kali ini saya akan membahas tentang Cara Membuat Image Flip dengan jQuery CSS. Dalam tutorial ini, kita akan melihat cara membalik gambar menggunakan jQuery dan CSS. Dalam tutorial sebelumnya, kita telah membuat Cara Membuat Meme Generator Menggunaka jQuery. Pada tutorial ini  saya bikin hanya sekedar untuk bermain -main.

Dalam contoh ini  kita akan membuat animasi membalik gambar ke arah horizontal menggunakan transformasi 3D. saya menggunakan properti transformasi CSS untuk membalik gambar dalam sumbu X. Properti CSS ini akan di atur  melalui jQuery.

Gambar Flip HTML dan CSS

Kode ini menampilkan markup HTML untuk gambar yang dapat diputar atau dibalik.

<html>
<head>
<title>Cara Membuat Image Flip dengan jQuery CSS</title>

</head>
<body>
	<div id="flip-box">
		<img src="images.jpg">
	</div>
	<div id="flip-link" class="demo-submit">
		Flip Image
	</div>
	

</body>
</html>

Berikut CSS untuk merapikan  tampilan image flip,

<style>
	#flip-box {
		width: 200px;
		height: 150px;
		transition: 0.9s;
		transform-style: preserve-3d;
		position: relative;
	}
	.demo-submit{
		padding: 10px 20px;
		background: #555;
		border: 0;
		color: #FFF;
		display:inline-block;
		margin-top:20px;
	}
</style>

Berikut jQuery untuk Image Flip

Skrip jQuery ini menunjukkan cara mengubah properti transformasi gambar pada aksi klik. Dengan mengubah properti transformasi gambar akan flip bolak-balik. Berikut scriptnya,

<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
<script type="text/javascript">
	$("#flip-link").on("click",function(){
		if($("#flip-box").css("transform") == 'none') {
			$("#flip-box").css("transform","rotateY(180deg)");
			$("#flip-box img").attr("src","images.jpg");
		}
		else {
			$("#flip-box").css("transform","");
			$("#flip-box img").attr("src","images1.jpg");
		}
	})
</script>

berikut ini contoh dari Cara Membuat Image Flip dengan jQuery CSS,

Oke itulah tadi pembahasan saya tentang Cara Membuat Image Flip dengan jQuery CSS, semoga bermanfaat.