In this tutorial i am going to show you how to rotate image using jquery, There is a plug-in called jQueryRotate is available on web to apply rotate animation on image in very minimal code.
So Here i am going to use this jquery based plug-in and will show you some image rotation examples.
First of all create your html file and call some sample images.
<HTML> <HEAD> <TITLE>Rotate image using jqueryTITLE> HEAD> <BODY> <div style="width:50%; margin:0 auto; text-align:center"> <h3>Example-1h3> <img src="img/chrome.png" class="img1"> <img src="img/internet-explorer.png" class="img1"> <img src="img/safari.png" class="img1"> div> BODY> HTML> |
After that add jquery core and jQuery Rotate library on your html page.
Note: jQuery Rotate library is dependent on jquery core library so don’t forget to add core library before jQuery rotate library.
<script src="jquery.min.js">script> <script src="jQueryRotate.js">script> |
Apply rotate action on images.
$(function() { var rotation = function (){ $(".img1").rotate({ angle:0, animateTo:360, callback: rotation }); } } |
Apply rotate action on button click, Means control image rotation using start and stop button.
<div> <button id="start">Start Rotationbutton> <button id="stop">Stop Rotationbutton> div> |
$(function() { var ang = 0; $("#start").click(function() { window.st = setInterval(function(){ ang+=4; $(".img1").rotate(ang); },10); }); $("#stop").click(function() { clearInterval(window.st); }); } |
You can apply more rotation action as per your requirement just go through jQuery Rotation official document http://jqueryrotate.com/