Important: All scripts hosted on widcraft.googlecode.com don't work anymore because Google has blocked that SVN repository.
Spinning image effect is cool and it's also easy to do..........so this time i'll show you how to give spinning CSS3 effect to your pics in blogger.....
- Go To Blogger > Template > Edit HTML
- Just Above ]]></b:skin> post the script given below
@-webkit-keyframes rotate {
from {
-webkit-transform: rotate(0deg);
}
to {
-webkit-transform: rotate(360deg);
}
}
@-moz-keyframes rotate {
from {
-moz-transform: rotate(0deg);
}
to {
-moz-transform: rotate(360deg);
}
}
@-ms-keyframes rotate {
from {
-ms-transform: rotate(0deg);
}
to {
-ms-transform: rotate(360deg);
}
}
#spin {
-webkit-animation-name: rotate;
-webkit-animation-duration: 5s; /* 5 seconds */
-webkit-animation-iteration-count: infinite;
-webkit-animation-timing-function: linear;
-moz-animation-name: rotate;
-moz-animation-duration: 5s; /* 5 seconds */
-moz-animation-iteration-count: infinite;
-moz-animation-timing-function: linear;
-ms-animation-name: rotate;
-ms-animation-duration: 5s; /* 5 seconds */
-ms-animation-iteration-count: infinite;
-ms-animation-timing-function: linear;
/* opera */
-o-transition: rotate(3600deg); /* working */
}
- Now save your template.
- Now on pics you want to spin add id="spin" tag
Like this : -
<img id="spin" src="Image URL" />
- You can also add this only in one post by adding code given below on your post
<style>
@-webkit-keyframes rotate {
from {
-webkit-transform: rotate(0deg);
}
to {
-webkit-transform: rotate(360deg);
}
}
@-moz-keyframes rotate {
from {
-moz-transform: rotate(0deg);
}
to {
-moz-transform: rotate(360deg);
}
}
@-ms-keyframes rotate {
from {
-ms-transform: rotate(0deg);
}
to {
-ms-transform: rotate(360deg);
}
}
#spin {
-webkit-animation-name: rotate;
-webkit-animation-duration: 5s; /* 5 seconds */
-webkit-animation-iteration-count: infinite;
-webkit-animation-timing-function: linear;
-moz-animation-name: rotate;
-moz-animation-duration: 5s; /* 5 seconds */
-moz-animation-iteration-count: infinite;
-moz-animation-timing-function: linear;
-ms-animation-name: rotate;
-ms-animation-duration: 5s; /* 5 seconds */
-ms-animation-iteration-count: infinite;
-ms-animation-timing-function: linear;
/* opera */
-o-transition: rotate(3600deg); /* working */
}
}
</style>
That's It.....Enjoy!!
Important: Check our new website TricksPanda.com for WordPress tutorials, plugins and more.
