Simple Rotate with Transition "Pure CSS3"

http://blog.kangrian.com

by Rian .N Herdian

HTML

<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/font-awesome/3.1.1/css/font-awesome.min.css">
<div id="test-putar">
<a href="http://twitter.com/riannurherdian" target="_blank"><i class="icon-twitter-sign icon-3x"></i></a></div>

CSS

#test-putar a { text-decoration:none; color:#55ACEE}
#test-putar {
text-align:center;
-webkit-transition: all 2s ease-in-out;
-moz-transition: all 2s ease-in-out;
-o-transition: all 2s ease-in-out;
-ms-transition: all 2s ease-in-out; 
transition: all 2s ease-in-out;
}
#test-putar:hover { -webkit-transform:rotate(-360deg);-moz-transform:rotate(-360deg);-ms-transform:rotate(-360deg);-o-transform:rotate(-360deg);transform:rotate(-360deg); }