<!DOCTYPE html> <html lang="en"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>css3实现社交图标旋转效果</title> </head> <style> #container { width: 960px; margin: 0 auto; } ul { width: 145px; margin: 0 auto; list-style: none; font-size: 0px; } li a { background: url(images/sprite.png) no-repeat; background-position: -55px 0; display: block; text-indent: -9999px; margin-top: 15px; } li a span { background: url(images/sprite.png) no-repeat; display: block; width: 30px; height: 32px; position: relative; z-index: 10; -webkit-transition: -webkit-transform 0.4s ease-out; -moz-transition: -moz-transform 0.4s ease-out; transition: transform 0.4s ease-out; } li a:hover span { -webkit-transform: rotate(360deg); -moz-transform: rotate(360deg); transform: rotate(360deg); } li.twitter a { background-position: -55px 0; width: 127px; height: 32px; } li.twitter a span { background-position: 0 0; } </style> <body> <div id="container"> <h1></h1> <ul id="social" class="group"> <li class="twitter"><a href="#"><span></span> twitter</a></li> </ul> </body> </html>
li a span { background: url(images/sprite.png) no-repeat; display: block; width: 30px; height: 32px; position: relative; z-index: 10;
-webkit-transition: -webkit-transform 0.4s ease-out;
-moz-transition: -moz-transform 0.4s ease-out;
transition: transform 0.4s ease-out;
}
li a:hover span {
-webkit-transform: rotate(360deg);
-moz-transform: rotate(360deg);
transform: rotate(360deg);
}
原文：http://www.cnblogs.com/hellman/p/4346490.html