Вращающиеся иконки

Эффект вращения социальных иконок с помощью CSS свойства transform. В Opera не работает, но порадует пользователей других браузеров.

HTML

<ul id="social" class="group">

    <li class="twitter"><a href="http://twitter.com/#!/pcvector"><span></span>twitter</a></li>
    <li class="dribbble"><a href="http://dribbble.com/"><span></span>dribbble</a></li>
    <li class="lastfm"><a href="http://www.last.fm/"><span></span>last.fm</a></li>

    <li class="spotify"><a href="http://open.spotify.com/"><span></span>Spotify</a></li>
    <li class="ember"><a href="http://emberapp.com/"><span></span>ember</a></li>
    <li class="inspectelement"><a href="http://inspectelement.com"><span></span>Inspect Element</a></li>

</ul>

CSS

Реализация иконок осуществлена с помощью спрайтов. Основной акцент в CSS сделан на свойствах transform и transition:

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

Работает в WebKit браузерах (Chrome и Safari) и Firefox 4.