How To Spin Image Using CSS3

In This Tutorial You Will Learn How To Spin Image Using CSS3. This Code Also Add Circle Effect On Your Image. You Can Learn  How To Circle E...

Related posts:

In This Tutorial You Will Learn How To Spin Image Using CSS3. This Code Also Add Circle Effect On Your Image. You Can Learn How To Circle Effect On Image Using CSS3. Follow These Steps To This Effect To Your Blog.

1. Login To Blogger Account.
2. Click Blog Title → Template → Edit HTML.
3. Click Proceed Button.
4. Search Following Code Using Ctrl+F.

</body>

5. Replace The Above Code With The Code Below.

<style>
@-webkit-keyframes spinnerRotate
{
from{-webkit-transform:rotate(0deg);}
to{-webkit-transform:rotate(360deg);}
}
@-moz-keyframes spinnerRotate
{
from{-moz-transform:rotate(0deg);}
to{-moz-transform:rotate(360deg);}
}
@-ms-keyframes spinnerRotate
{
from{-ms-transform:rotate(0deg);}
to{-ms-transform:rotate(360deg);}
}
#spin{
position:fixed;
bottom:2%;
left:0%;
-webkit-animation-name: spinnerRotate;
-webkit-animation-duration: 5s;
-webkit-animation-iteration-count: infinite;
-webkit-animation-timing-function: linear;
-moz-animation-name: spinnerRotate;
-moz-animation-duration: 5s;
-moz-animation-iteration-count: infinite;
-moz-animation-timing-function: linear;
-ms-animation-name: spinnerRotate;
-ms-animation-duration: 5s;
-ms-animation-iteration-count: infinite;
-ms-animation-timing-function: linear;
}
#spin img{-webkit-border-radius: 200px;
-moz-border-radius: 200px;
border-radius: 200px;}
#spin span{
-webkit-border-radius: 200px;
-moz-border-radius: 200px;
border-radius: 200px;
padding: 3px;
background: #FEFEFE;
float: left;
position: relative;
overflow: hidden;
}
</style>
<div id="spin">
<a href="Link URL"><img src="Image URL"/></span>
</div>
</body>

6. Change Link URL And Image URL With Your Links.
7. You Want To Increase Or Decrease Spinning Speed Change 5s (5s Means 5 Seconds To Complete One Round).
8. Click Save Template Button And You Are Done.