jQuery Rotate Effect For Blogger Images

How to add jquery rotate effect for  images. For this post i am using CSS with jquery. You can use this effect on side bar with any image size. Its easy to add to your blog. So i think i don't need to explain more and more so keep this simple and let's start our work.

1. Log in to blogger account
2. Click on Layout

3. Click Add Gadget and select 'HTML/Javascript
4. Paste below one of below code.

<script>

    $(function() {

        var tot = $(".img_c").length;

        var stat = deg = 10;

        var rotate = "";

        var frame, mozframe, webkitframe;

        $("img").each(function(index) {

            $(this).css({

                "transform": "rotate("+deg+"deg)",

                "-moz-transform": "rotate("+deg+"deg)",

                "-webkit-transform": "rotate("+deg+"deg)",

                "-o-transform": "rotate("+deg+"deg)"

            });

            rotate = "100% {" +

                "transform: rotate(360deg);" +

                "-moz-transform: rotate(360deg);" +

                "-webkit-transform: rotate(360deg);" +

                "-o-transform: rotate(360deg);" +

                "} ";

            var imgclass = parseInt(index+1);

            frame = " @keyframe anim" + imgclass + " { " +

                rotate + "}";

            mozframe = " @-moz-keyframes anim" + imgclass + " { " +

                rotate + "}";

            webkitframe = " @-webkit-keyframes anim" + imgclass + " { " +

                rotate + "}";

            $('<style> '+ frame + mozframe + webkitframe +

                ' .img'+imgclass+' { animation: anim'+imgclass+' 3s ease 0s infinite alternate;' +

                                   '-moz-animation: anim'+imgclass+' 3s ease 0s infinite alternate;' +

                                   '-webkit-animation: anim'+imgclass+' 3s ease 0s infinite alternate; }'

                +'</style>').appendTo('head');

            deg = deg + stat;

        });

    });

    </script>

    <style>

        body {

            background: #fff url('wood_pattern.png') repeat top right;

        }

        .content {

            margin: 0 auto;

            padding: 100px;

        }

        img {

            margin: 10px;

            padding: 20px;

            background: #fff;

            -moz-box-shadow: 0px 0px 3px #d3d3d3;

            -webkit-box-shadow: 0px 0px 3px #d3d3d3;

            box-shadow: 0px 0px 3px #000000;

            position: absolute;

        }

    </style>

    <br />

<div class="content">

<div class="img_c">

<img class="img1" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi13cb1zVvXTx4QnLmlyURX7jc-RLKjR_GatkNpW2ugIxfXu5sRtakK4IlI94Szqq1tp1Jbft5fEsSK_UGf1njWZJpmiA6l_hFWjWEEsBu0Tto8u7rsfTXj5GLA648Wmypd2_ESAnXDago/s1600/nature.jpg" /></div>

<div class="img_c">

<img class="img2" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi13cb1zVvXTx4QnLmlyURX7jc-RLKjR_GatkNpW2ugIxfXu5sRtakK4IlI94Szqq1tp1Jbft5fEsSK_UGf1njWZJpmiA6l_hFWjWEEsBu0Tto8u7rsfTXj5GLA648Wmypd2_ESAnXDago/s1600/nature.jpg" /></div>

<div class="img_c">

<img class="img3" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi13cb1zVvXTx4QnLmlyURX7jc-RLKjR_GatkNpW2ugIxfXu5sRtakK4IlI94Szqq1tp1Jbft5fEsSK_UGf1njWZJpmiA6l_hFWjWEEsBu0Tto8u7rsfTXj5GLA648Wmypd2_ESAnXDago/s1600/nature.jpg" /></div>

<div class="img_c">

<img class="img4" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi13cb1zVvXTx4QnLmlyURX7jc-RLKjR_GatkNpW2ugIxfXu5sRtakK4IlI94Szqq1tp1Jbft5fEsSK_UGf1njWZJpmiA6l_hFWjWEEsBu0Tto8u7rsfTXj5GLA648Wmypd2_ESAnXDago/s1600/nature.jpg" /></div>

<div class="img_c">

<img class="img5" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi13cb1zVvXTx4QnLmlyURX7jc-RLKjR_GatkNpW2ugIxfXu5sRtakK4IlI94Szqq1tp1Jbft5fEsSK_UGf1njWZJpmiA6l_hFWjWEEsBu0Tto8u7rsfTXj5GLA648Wmypd2_ESAnXDago/s1600/nature.jpg" /></div>

<div class="img_c">

<img class="img6" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi13cb1zVvXTx4QnLmlyURX7jc-RLKjR_GatkNpW2ugIxfXu5sRtakK4IlI94Szqq1tp1Jbft5fEsSK_UGf1njWZJpmiA6l_hFWjWEEsBu0Tto8u7rsfTXj5GLA648Wmypd2_ESAnXDago/s1600/nature.jpg" /></div>

<div class="img_c">

<img class="img7" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi13cb1zVvXTx4QnLmlyURX7jc-RLKjR_GatkNpW2ugIxfXu5sRtakK4IlI94Szqq1tp1Jbft5fEsSK_UGf1njWZJpmiA6l_hFWjWEEsBu0Tto8u7rsfTXj5GLA648Wmypd2_ESAnXDago/s1600/nature.jpg" /></div>

<div class="img_c">

<img class="img8" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi13cb1zVvXTx4QnLmlyURX7jc-RLKjR_GatkNpW2ugIxfXu5sRtakK4IlI94Szqq1tp1Jbft5fEsSK_UGf1njWZJpmiA6l_hFWjWEEsBu0Tto8u7rsfTXj5GLA648Wmypd2_ESAnXDago/s1600/nature.jpg" /></div>

<div class="img_c">

<img class="img9" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi13cb1zVvXTx4QnLmlyURX7jc-RLKjR_GatkNpW2ugIxfXu5sRtakK4IlI94Szqq1tp1Jbft5fEsSK_UGf1njWZJpmiA6l_hFWjWEEsBu0Tto8u7rsfTXj5GLA648Wmypd2_ESAnXDago/s1600/nature.jpg" /></div>

<div class="img_c">

<img class="img10" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi13cb1zVvXTx4QnLmlyURX7jc-RLKjR_GatkNpW2ugIxfXu5sRtakK4IlI94Szqq1tp1Jbft5fEsSK_UGf1njWZJpmiA6l_hFWjWEEsBu0Tto8u7rsfTXj5GLA648Wmypd2_ESAnXDago/s1600/nature.jpg" /></div>

</div>

Replace red color link with your image URL.
7. Now save your HTML/Javascript'.

You are done. If you get any problem then comment us, we will respond you quickly.

Related Articles:

jQuery Slideshow For Blogger

Popup/Slideout Facebook Likebox 

How to Create Drop Down Menu  

Multi Column Footer Widget