利用css3制作图标旋转效果

发布者：前端集合 // 发布时间：2011-06-06 21:14:58 // 分类：技巧应用,前端集合 // 访问: 4,006 次 // 热度:

首先，体验一下效果：View demo。

1. HTML

<ul id="social" class="group">
    <li class="twitter"><a href="http://twitter.com/tkenny"><span></span>twitter</a></li>
    <li class="dribbble"><a href="http://dribbble.com/tkenny"><span></span>dribbble</a></li>
    <li class="lastfm"><a href="http://www.last.fm/user/KennySim"><span></span>last.fm</a></li>
    <li class="spotify"><a href="http://open.spotify.com/user/tkenny"><span></span>Spotify</a></li>
    <li class="ember"><a href="http://emberapp.com/tkenny/"><span></span>ember</a></li>
    <li class="inspectelement"><a href="http://inspectelement.com"><span></span>Inspect Element</a></li>
</ul>

2. CSS

li a span {
    -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: rotateZ(360deg);
    -moz-transform: rotateZ(360deg);
    transform: rotateZ(360deg);
}

VIA

Tags: css3, 图标旋转效果