360 Degree Spin Effect with CSS3 in Blogger Posts

Rate this Post:

{[['

']]}

By using CSS3 We can make images rotating with our desired angle. Today i am going to share rotating/spin effect of image. I will also tell you how to use it in blogger Posts.

First Create a New Post and Go to HTML. Then Paste This Code;

<style>
.rotate{
-webkit-transition-duration: 1s;
-moz-transition-duration: 1s;
-o-transition-duration: 1s;
transition-duration: 1s;
-webkit-transition-property: -webkit-transform;
-moz-transition-property: -moz-transform;
-o-transition-property: -o-transform;
transition-property: transform;
overflow:hidden;
}
.rotate:hover
{
-webkit-transform:rotate(360deg);
-moz-transform:rotate(360deg);
-o-transform:rotate(360deg);
}
</stlye>

Now Upload the image to whom you want to apply the effect and make changes like this. First find <img /> Tag;

<img class=”rotate” src=”IMG URL” />

And Simply Add Class=”rotate” to this tag as shown above.

Alternatively You can add this code to Template HTML instead of separate post. To to this;
Login to Blogger
Goto Design
Edit HTML

Then Find ]]</b:skin> and paste the following code above/before it.

.rotate{
-webkit-transition-duration: 1s;
-moz-transition-duration: 1s;
-o-transition-duration: 1s;
transition-duration: 1s;
-webkit-transition-property: -webkit-transform;
-moz-transition-property: -moz-transform;
-o-transition-property: -o-transform;
transition-property: transform;
overflow:hidden;
}
.rotate:hover
{
-webkit-transform:rotate(360deg);
-moz-transform:rotate(360deg);
-o-transform:rotate(360deg);
}