Published - | Updated - August 24, 2021 10:34 pm
235 Views
Hi Dev,
Today, i we will show you rotate image animation in jquery. This article will give you simple example of rotate image animation in jquery. you will rotate image animation in jquery. So let’s follow few step to create example of rotate image animation in jquery.
Example:
<!DOCTYPE html>
<html>
<head>
<title>Rotate Image Animation In Jquery</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<style>
.rotateimg{
font-size: 30px;
font-weight: bold;
color: #f85d09;
}
</style>
</head>
<body>
<div class="rotateimg mx-auto">
<div class="container text-center">
<div class="row">
<div class="col-md-12 mb-3">
<p>Rotate Image Animation In Jquery</p>
<img src="https://codeplaners.com/wp-content/uploads/2020/09/cropped-favicon-social-192x192.png" width="100" height="100">
</div>
<button class="btn btn-primary mx-auto mt-4">Rotate image</button>
</div>
</div>
</div>
<!-- script -->
<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>
<!-- script end -->
</body>
</html>
I hope it will assist you…