Awesome Jquery Rotate Effect For Blogger Images

In this post im gonna explain how to add awesome jquery rotate effect for images. For this post im
using CSS with jquery.You can use this effect on side bar with any image size. its easy to add to blogger. I think i don't need to explain more. just check the demo link below. you will get it.Get my
earlier images effect post here.

Demo

1. Log in to blogger account and Click drop down.

2. Now select "Layout" Like Below.

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/AVvXsEhT4R0izOEGsSV1oHxC2k-9Vhz8Ob6xafRHDe_qHj1dFLEW1IBf2SR8RrGPS3t2P65WUHzZYeMu9j_0AJwmGZOrhLngaOlmiGpmwOJA7PSqhTMjxgljgdVPER1TH6dLbdqZbw77UoeCC4Y/s1600/nature.jpg" /></div>
<div class="img_c">
<img class="img2" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhT4R0izOEGsSV1oHxC2k-9Vhz8Ob6xafRHDe_qHj1dFLEW1IBf2SR8RrGPS3t2P65WUHzZYeMu9j_0AJwmGZOrhLngaOlmiGpmwOJA7PSqhTMjxgljgdVPER1TH6dLbdqZbw77UoeCC4Y/s1600/nature.jpg" /></div>
<div class="img_c">
<img class="img3" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhT4R0izOEGsSV1oHxC2k-9Vhz8Ob6xafRHDe_qHj1dFLEW1IBf2SR8RrGPS3t2P65WUHzZYeMu9j_0AJwmGZOrhLngaOlmiGpmwOJA7PSqhTMjxgljgdVPER1TH6dLbdqZbw77UoeCC4Y/s1600/nature.jpg" /></div>
<div class="img_c">
<img class="img4" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhT4R0izOEGsSV1oHxC2k-9Vhz8Ob6xafRHDe_qHj1dFLEW1IBf2SR8RrGPS3t2P65WUHzZYeMu9j_0AJwmGZOrhLngaOlmiGpmwOJA7PSqhTMjxgljgdVPER1TH6dLbdqZbw77UoeCC4Y/s1600/nature.jpg" /></div>
<div class="img_c">
<img class="img5" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhT4R0izOEGsSV1oHxC2k-9Vhz8Ob6xafRHDe_qHj1dFLEW1IBf2SR8RrGPS3t2P65WUHzZYeMu9j_0AJwmGZOrhLngaOlmiGpmwOJA7PSqhTMjxgljgdVPER1TH6dLbdqZbw77UoeCC4Y/s1600/nature.jpg" /></div>
<div class="img_c">
<img class="img6" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhT4R0izOEGsSV1oHxC2k-9Vhz8Ob6xafRHDe_qHj1dFLEW1IBf2SR8RrGPS3t2P65WUHzZYeMu9j_0AJwmGZOrhLngaOlmiGpmwOJA7PSqhTMjxgljgdVPER1TH6dLbdqZbw77UoeCC4Y/s1600/nature.jpg" /></div>
<div class="img_c">
<img class="img7" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhT4R0izOEGsSV1oHxC2k-9Vhz8Ob6xafRHDe_qHj1dFLEW1IBf2SR8RrGPS3t2P65WUHzZYeMu9j_0AJwmGZOrhLngaOlmiGpmwOJA7PSqhTMjxgljgdVPER1TH6dLbdqZbw77UoeCC4Y/s1600/nature.jpg" /></div>
<div class="img_c">
<img class="img8" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhT4R0izOEGsSV1oHxC2k-9Vhz8Ob6xafRHDe_qHj1dFLEW1IBf2SR8RrGPS3t2P65WUHzZYeMu9j_0AJwmGZOrhLngaOlmiGpmwOJA7PSqhTMjxgljgdVPER1TH6dLbdqZbw77UoeCC4Y/s1600/nature.jpg" /></div>
<div class="img_c">
<img class="img9" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhT4R0izOEGsSV1oHxC2k-9Vhz8Ob6xafRHDe_qHj1dFLEW1IBf2SR8RrGPS3t2P65WUHzZYeMu9j_0AJwmGZOrhLngaOlmiGpmwOJA7PSqhTMjxgljgdVPER1TH6dLbdqZbw77UoeCC4Y/s1600/nature.jpg" /></div>
<div class="img_c">
<img class="img10" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhT4R0izOEGsSV1oHxC2k-9Vhz8Ob6xafRHDe_qHj1dFLEW1IBf2SR8RrGPS3t2P65WUHzZYeMu9j_0AJwmGZOrhLngaOlmiGpmwOJA7PSqhTMjxgljgdVPER1TH6dLbdqZbw77UoeCC4Y/s1600/nature.jpg" /></div>
</div>