This is a short tutorial on the rotate image using jquery. In the previous post How to Flip an Image using jQuery & CSS.
In this post we will show you a simple example of a jQuery rotate image of 90 degrees clockwise, 90 degrees counter-clockwise, 180 degrees, and 360 degrees.
Some plugin also available for rotate image but I will suggest you using jquery animate and CSS transform property.
jQuery Image Rotate Example
Let’s check the below example jquery rotate image on button click.
First, write below HTML Code with Rotate Buttons
In this code, we have used RotateImageMethod on the button onClick event.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 |
<style> #imageSec{ padding:25px 10px; margin-top:50px; } .rotateBtn { padding: 5px 10px; background-color: #D83333; border: 0; color: #FFF; cursor: pointer; } </style> <div> <label>Rotate an image:</label> <input type="button" class="rotateBtn" value="Rotate 90 Clockwise" onClick="RotateImageMethod(90);" /> <input type="button" class="rotateBtn" value="Rotate 90 Counter Clockwise" onClick="RotateImageMethod(-90);" /> <input type="button" class="rotateBtn" value="Roate 180" onClick="RotateImageMethod(180);" /> <input type="button" class="rotateBtn" value="Rotate 360" onClick="RotateImageMethod(360);" /> </div> <div><img src="rotate-flower.png" id="imageSec" /></div> </div> |
Write a jQuery Rotate Function
This jQuery function will rotate the image element by changing its CSS transform property.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
<script> function RotateImageMethod(degree) { $('#imageSec').animate({ transform: degree }, { step: function(now,fx) { $(this).css({ '-webkit-transform':'rotate('+now+'deg)', '-moz-transform':'rotate('+now+'deg)', 'transform':'rotate('+now+'deg)' }); } }); } </script> |
Using RotateImageMethod function we are controlling the image CSS transform property.
