Hello
Today I have designed a landing page for my website http://www.vivekv.com with some nice jQuery effects. Soon after I published the site address on facebook, I got questions from my friends that how did I rotate the images. They first thought ( like me ) that it is because of jQuery code. But no, it is purely CSS3 ( therefore IE does not support it )
Adding rotation effect using the CSS3 transition property is posted below. Thanks david walsh for this code snippet
[css]
.rotate{
-webkit-transition-duration: 0.8s;
-moz-transition-duration: 0.8s;
-o-transition-duration: 0.8s;
transition-duration: 0.8s;
-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);
}
[/css]
Then just attach the class “rotate” with any image or text to rotate it 360 degree.
Demo can be found HERE and of course, on my home page as well
Thnk a lot… It’s nice
this won’t work in chrome and ie
It works in Chrome.
I haven’t checked with IE7
It works in chrome too as well as in Firefox!
This works great! Thanks so much! Any way you can add another image (not spinning) above the spinning image when hovered?
Thanks very much that’s what I was looking for I reckon.
“Then just attach the class “rotate†with any image” HOW?
please, help me!
Easy! sorry
wow its cool thanx
I had one animation wid php dis is a lot better
thank u very much it was very useful for me.
Nice work man…
this code is good.. but there is one problm. its not workin on some browsers like IE and mozilla.. 🙁
Thanks for sharing! it’s very helpful.
thankss its easy to use and nice..
This doesn’t work in Chrome, Net Scape Navigator and IE
This is very cool! works on every browser! thanks a lot, man!
good job…:)
This is very nice example…
Very nice one,, thanks for that…… keep it glowing……..
What an absolutely cool effect. You got the timing down really good, too, because that rate of spin, etc., is especially pleasing.
Thanks. Great work.
Works perfect, thanks!
What would the code look like if I wanted to rotate when I click on a button?
Hi,
cool effect! is there a way to stop animation when the cursor leaves image? Apply effect only on mouse over event?
Thanks in advice!
Hi This is not working in IE, the most used web-browser.
works like charm bro ! thanks !
Can we Rotate text in this manner????
Hearty Thnks…..This code make me proud after implementation.. 🙂
good consept
Hey this is some great coding! Just wondering how I can get my image to continue to rotating while on hover? Any ideas would be great.
hi vivek its works great but i need IE 7 & 8 code can you please help …. 🙂
Really helpful… 🙂
sir, can u please explain the angle or degree in rectangle box using htm and css?
Thanks 🙂
To make this work in IE 8 and up. Add this to .rotate:hover class:
-ms-transform:rotate(360deg);
To make this work in IE8 and up, add this line to the .rotate:hover class:
-ms-transform:rotate(360deg);
Thanks for the code man. Really nice animation!
Works perfectly. Thanks for the code!
Hi Vivek,
Just curious, Is it possible to rotate when the page loads without javascript?
Thank you, and excellent css3 code!
Brian
nice work dude, i really needed that thanks alot 🙂