clock  Mon - Sun 8.00 AM - 8.00 PM
mail  edu@teknowize.com
fb
instagram
play store
pinterest

Rotate image with CSS animation using JQuery animate() method

  Hariom Prajapati
  24 Jun 2022
  JQuery
Imperial Advance Hero Image

Rotate image with CSS animation using JQuery animate() method

In 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 

jquery