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

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

<img alt=”” border=”0″ src=”https://m-primahtarsk.ru/kod/vrashhajushhiesja_ikonki.jpg” />

HTML разметка

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

&nbsp; &nbsp; <li class=’twitter’><a href=’http://twitter.com/#!/pcvector’><span></span>twitter</a></li>

&nbsp; &nbsp; <li class=’dribbble’><a href=’http://dribbble.com/’><span></span>dribble</a></li>

&nbsp; &nbsp; <li class=’lastfm’><a href=’http://www.last.fm/’><span></span>last.fm</a></li>

&nbsp; &nbsp; <li class=’spotify’><a href=’http://open.spotify.com/’><span></span>Spotify</a></li>

&nbsp; &nbsp; <li class=’ember’><a href=’http://emberapp.com/’><span></span>ember</a></li>

&nbsp; &nbsp;<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;

&nbsp; &nbsp; -webkit-transition: -webkit-transform 0.4s ease-out;

&nbsp; &nbsp; -moz-transition: -moz-transform 0.4s ease-out;

&nbsp; &nbsp; transition: transform 0.4s ease-out;

}

li a:hover span {

&nbsp; &nbsp; -webkit-transform: rotate(360deg);

&nbsp; &nbsp; -moz-transform: rotate(360deg);

&nbsp; &nbsp; transform: rotate(360deg);

}

2,656 просмотров всего, 4 просмотров сегодня