11-Apr-2023
.
Admin
Now let's see example of image rotate 90 degrees with css animation using jquery. In this post i will show you jquery rotate image animation example. We will talk about how to use rotate image animation in jquery.
there are several plugin available for rotate image but i will suggest you using jquery animate and using CSS3 transform property. you need to just give value with deg as property. it will make simple and customize.
bellow example, when you click on button image will rotate each time 90 deg. you can simple copy html file and check it. it is a very simple example, just check bellow code.
Example :
<!DOCTYPE html>
<html>
<head>
<title>Jquery rotate image animation example - NiceSnippets.com</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>
body{
background-color:#ddd;
}
.rotateimg{
background:#fff;
width: 72%;
height: 320px;
margin-top: 15%;
}
.rotateimg{
font-size: 30px;
font-weight: bold;
color: green;
}
.rotateimg img{
margin-top:30px;
}
.rotateimg p{
margin-top: 10px;
}
</style>
</head>
<body>
<!-- content strat -->
<div class="rotateimg mx-auto">
<div class="container text-center">
<div class="row">
<div class="col-md-12 mb-3">
<p>Jquery rotate image animation example - NiceSnippets.com</p>
<img src="https://www.nicesnippets.com/image/imgpsh_fullsize.png" width="100" height="100">
</div>
<button class="btn btn-primary mx-auto mt-4">Rotate image</button>
</div>
</div>
</div>
<!-- content end -->
<!-- script start -->
<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>
It will help you....
#Jquery
