How to Rotate Image in jQuery

Today we will create a demo to rotate image with the help of jquery. There is a plug-in called jQueryRotate is available on web to apply rotate animation on image in very less code.

So for creating a demo for image rotation we don't need to put much effot since jquey already provide plug-in. So let's  start creating the demo as discussed.

Let's  have a look in  the only one page we need to code, index.html. 

So in the above file we have created two different example first, where image is rotating automatically and second, where image is rotating manually. So lets under the code step by step. At the top we have two different div defined first one for the showing the automatic rotation and second one for manual. Both are having two images. In  the second example we have two button for starting rotation and stoping the rotation, since the second one is manual rotation.

Below  that we have added jquery core and jQuery Rotate library for the actual task of image rotation.  And at the bottom of the file we have script tag within which we  have set rotation for the image. And $(".auto-rotation2").rotate(ang)  is responsible for the image rotation, here we can set the rotation by the angle and the interval duration in code. So we can manage the speed and other behaviour of rotation as per the requirement.

That’s all for now. Thank you for reading and I hope this post will be very helpful for implementation of image rotation in any web application.

Let me know your thoughts over the email demo.jsonworld@gmail.com. I would love to hear them and If you like this article, share with your friends.