CSS

Jquery Rotate Image Animation Example

In this example, we will create simple example of image rotate 90 degrees with css animation using javascript. you can easily image rotate 90 degrees, 180 degrees or 360 degrees using transform css with jquery animate function. 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.

TAGS
HTML
CSS

4.5/5.0
Last updated 08 September, 2022
By Admin

I given first i will give you simple example of disable text selection on website jquery using css property. you need to just add some css on your body tag as you can see on bellow example example code. you can simply copy and check that.

Example:

<!DOCTYPE html>
<html>
<head>
  <title>Jquery rotate image animation example - codewale.com</title>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
<body>
<img src="https://codewale.com/uploads/other/no_image_found.jpg">
<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>

I hope it can help you...

CSS

Jquery Rotate Image Animation Example

Example:

Categories

Popular Tags