In this tutorial, we will learn Jquery rotate image animation example



Example:

<!DOCTYPE html>
<html>
<head>
  <title>Jquery rotate image animation example - rathorji.in</title>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
<body>
    
<img src="https://rathorji.in/frontTheme/images/logo.png">
<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>

May this example help you


Are you facing problems in understanding this article?
You can watch the video. Watch it now