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

При наведении курсора мыши на изображение иконки, последняя вращается вокруг своей оси, чтобы привлечь к себе внимание. Этот эффект достигается с помощью параметра rotate, изменяя значение которого можно повернуть элемент на любое число градусов по часовой стрелке или против часовой стрелки.

Установка на сайт

1. Код в таблице внизу вставить в раздел head или файл стилей сайта:

<style type="text/css">

p#socialicons img{ /* 1st set of icons. Rotate them 360deg onmouseover and out */
-moz-transition: all 0.8s ease-in-out;
-webkit-transition: all 0.8s ease-in-out;
-o-transition: all 0.8s ease-in-out;
-ms-transition: all 0.8s ease-in-out;
transition: all 0.8s ease-in-out;
}

p#socialicons img:hover{
-moz-transform: rotate(360deg);
-webkit-transform: rotate(360deg);
-o-transform: rotate(360deg);
-ms-transform: rotate(360deg);
transform: rotate(360deg);
}

p#socialicons2 img{ /* 2nd set of icons. Rotate them 60deg onmouseover and out */
-moz-transition: all 0.2s ease-in-out;
-webkit-transition: all 0.2s ease-in-out;
-o-transition: all 0.2s ease-in-out;
-ms-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out;
}

p#socialicons2 img:hover{
-moz-transform: rotate(70deg);
-webkit-transform: rotate(70deg);
-o-transform: rotate(70deg);
-ms-transform: rotate(70deg);
transform: rotate(70deg);
}

p#socialicons3 img{ /* 3rd set of icons. Rotate them -360deg onmouseover ONLY. Note where the "transition prop is added */
}

p#socialicons3 img:hover{ 
-moz-transition: all 0.5s ease-in-out;
-webkit-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
-ms-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
-moz-transform: rotate(-360deg);
-webkit-transform: rotate(-360deg);
-o-transform: rotate(-360deg);
-ms-transform: rotate(-360deg);
transform: rotate(-360deg);
}
</style>

2. А этот код скопируйте и расположите в разделе body в том месте, где желаете видеть иконки:

<br><h4>Поворот на 360 градусов по часовой стрелке с возвратом к исходному состоянию:</h4>

<p id="socialicons">
<a href="#">
<img border="0" src="img/rss.png" alt=""></a>
<a href="#">
<img border="0" src="img/delicious.png" alt=""></a>
<a href="#">
<img border="0" src="img/facebook.png" alt=""></a>
<a href="#">
<img border="0" src="img/twitter.png" alt=""></a>
<a href="#">
<img border="0" src="img/yahoo.png" alt=""></a>
</p>

<br><br><h4>Поворот на 60 градусов по часовой стрелке с возвратом к исходному состоянию:</h4>

<p id="socialicons2">
<a href="#">
<img border="0" src="img/rss.png" alt=""></a>
<a href="#">
<img border="0" src="img/delicious.png" alt=""></a>
<a href="#">
<img border="0" src="img/facebook.png" alt=""></a>
<a href="#">
<img border="0" src="img/twitter.png" alt=""></a>
<a href="#">
<img border="0" src="img/yahoo.png" alt=""></a>
</p>

<br><br><h4>Поворот на 360 градусов против часовой стрелки:</h4>

<p id="socialicons3">
<a href="#">
<img border="0" src="img/rss.png" alt=""></a>
<a href="#">
<img border="0" src="img/delicious.png" alt=""></a>
<a href="#">
<img border="0" src="img/facebook.png" alt=""></a>
<a href="#">
<img border="0" src="img/twitter.png" alt=""></a>
<a href="#">
<img border="0" src="img/yahoo.png" alt=""></a>
</p>

В демо-примере я намеренно применил изображения иконок большого размера (128x128). Это сделано для наглядности эффекта. Вы без труда сможете подобрать другие размеры иконок в предоставленном вспомогательном материале, скачать который можно здесь.

Определитесь, какие иконки и каких социальных сетей и проектов Вам нужны и впишите их URL-лы.

А если Вам не нравятся такие иконки, в Сети есть множество предложений по скачиванию иконок различных дизайнерских решений и размеров.

Спасибо за внимание. Всего Вам доброго и светлого! Посещайте мой сайт. Пока! Ваш Л.М.