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.

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

 

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.

Berikut hasil dari script kita di atas dalam kondisi normal  ;

Cara Membuat jQuery Image Rotate

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

Cara-Membuat-jQuery-Image-Rotate

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