Image Rotaton in jQuery

How to rotate image in any angle with jQuery in a click. In this image rotation jQuery example, we are using jQuery animate function. Using this function we are controlling the image transform property.

Live Preview

---

Remember, you must have to add the jQuery library and then jQuery Rotate library like the following code

HTML Code

---

<img id="rotateimage" src="http://www.codexwp.com/wp-content/uploads/2018/11/bird.png"><br><br>
<input id="degree" style="width: 100px;margin-right: 10px;" type="text" value="90">
<input id="rotate" style="height: 40px;" type="button" value="Rotate">

JS Code

---

<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script src="http://www.codexwp.com/wp-content/uploads/2018/11/jQueryRotate.min_.js"></script>
<script>
$("#rotate").click(function(){
$v = parseInt($("#degree").val());
   $("#rotateimage").rotate($v);
});
</script>

jQuery Rotate Documention

---

1. The JavaScript to rotate your image by a given angle.

$("img").rotate(180);

2. Add an animation to the image while rotating.

$("img").rotate({
        angle: 0,
        animateTo:180
});

3. Config the duration of the rotate animation.

$("img").rotate({
        angle: 0,
        animateTo:180,
        duration:6000
});

5. Easing function is supported as well.

$("img").rotate({
angle: 0,
animateTo:180,
easing: function(){}
});

6. Execute a callback function when the animation is completely finished.

$("img").rotate({
angle: 0,
animateTo:180,
callback: function(){}
});

7. Get the current angle of rotated image.

$("img").rotate({
angle: 0,
animateTo:180,
callback: function(){
alert($(this).getRotateAngle());
}
});

8. Stop the rotate animation manually.

$("img").stopRotate();