Cara Membuat jQuery Image Rotate

Hallo sahabat dumenity berjumpa lagi dalam tutorialÂ kursuswebdesign,Â pada tutorial kali ini saya akan membahas tentang Cara Membuat jQuery Image Rotate. Dalam tutorial ini, kita akan merotasi elemen gambar HTML dengan menggunakan jQuery. Kalau pada tutorial sebelumnya saya membahas Cara Membuat Image Flip dengan jQuery CSS. Nanti kita akan Membuat sebuah tampilan gambar dengan menu rotate, dimana ketika kita mengklik salah satu menu maka gambar akan berubah bentuk tampilannya.

Dalam contoh rotasi gambar ini, kita menggunakan fungsi beranimasi jQuery. Menggunakan fungsi ini kita mengendalikan properti transformasi citra.

Kode HTML dengan Tombol Putar

Di bawah ini kita akan membuat beberapa tombol yang berisi nilai rotasi perputaran gambar, jadi ketika kita klik salah satu menu atau tombol maka gambar akan berubah arah tampilannya.

<html>
<head>
<title>jQuery Image Rotate</title>
</head>
<body>
	<div>
		<label>Rotate Image:</label>
		<input type="button" class="btnRotate" value="90" onClick="rotateImage(this.value);" />
		<input type="button" class="btnRotate" value="-90" onClick="rotateImage(this.value);" />
		<input type="button" class="btnRotate" value="180" onClick="rotateImage(this.value);" />
		<input type="button" class="btnRotate" value="360" onClick="rotateImage(this.value);" />
	</div>
        <div>
            <img src="naruto.jpg" id="demo-image" />
        </div>
</body>
</html>

berikut CSS untuk mengatur tampilan dari Cara Membuat jQuery Image Rotate,

<style>
		#demo-image{padding:25px 10px;}
		.btnRotate {padding: 5px 10px;background-color: #09F;border: 0;color: #FFF;cursor: pointer;}
	</style>

Kode ini menampilkan elemen gambar dan daftar tombol HTML untuk memutar gambar.

jQuery di bawah ini merupakan fungsi untuk menjalankan tombol dari HTML yang kita buat serta untuk mengambil value dari tag input HTML di atas.

<script src="http://code.jquery.com/jquery-2.1.1.js"></script>
	<script>
		function rotateImage(degree) {
			$('#demo-image').animate({  transform: degree }, {
		    step: function(now,fx) {
		        $(this).css({
		            '-webkit-transform':'rotate('+now+'deg)', 
		            '-moz-transform':'rotate('+now+'deg)',
		            'transform':'rotate('+now+'deg)'
		        });
		    }
		    });
		}
	</script>

Berikut hasil dari script kita di atas dalam kondisi normalÂ ;

Dan di bawah ini ketika saya klik tombol rotate -90 ;

Oke itulah tadi pembahasan saya tentang Cara Membuat jQuery Image Rotate, semoga bermanfaat.

Kategori