Hariom
Prajapati
24 Jun 2022
JQueryIn this tutorial we will learn how to rotate image with CSS animation using jQuery animate() method.
Using this you can rotate image according to your need like 90 degrees, 180 degrees or 360 degrees using CSS animation using jQuery function.
there are many type plugin available using which we can rotate image but i will suggest you to use CSS animation or jQuery animation method because if you use this then you can easily customize it.
Here we will use jQuery animate() method to rotate image with CSS animation using jQuery.
<html>
<head>
<title>Rotate image with CSS animation using JQuery</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
<body>
<img src="https://scontent.fpat3-3.fna.fbcdn.net/v/t1.6435-9/173435656_100553882178512_5067283647022573909_n.png?_nc_cat=106&ccb=1-5&_nc_sid=09cbfe&_nc_ohc=YI-DPfxix60AX_04-6p&_nc_oc=AQm4t1zTSXcQOtWsECWg1b54FYG-yKvts0yit49eZyz7CE2XfRIVi4R4ohi89BeAmD8&tn=8lmRwSjEcX7Ytb8g&_nc_ht=scontent.fpat3-3.fna&oh=aeb0e2f0e59fb3efc1c038d45cb9ba6a&oe=61C06B91"
width="100">
<button>Rotate image</button>
<script type="text/javascript">
var tmpAnimation = 0;
$("button").click(function () {
var element = $("img");
tmpAnimation = tmpAnimation + 90;
$({
degrees: tmpAnimation - 90
}).animate({
degrees: tmpAnimation
}, {
duration: 2000,
step: function (now) {
element.css({
transform: 'rotate(' + now + 'deg)'
});
}
});
});
</script>
</body>
</html>
Output
