<!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; 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);
}