Главная » Рецепты CSS » Как сделать вращающиеся иконки для сайта на CSS?

Как сделать вращающиеся иконки для сайта на CSS?

2014-10-29 / Вр:22:29 / просмотров: 7487

Как сделать вращающиеся иконки для сайта на CSS? Прежде чем я приступлю к коду, хочу немного рассказать о том, как работает этот эффект. Всякий раз, когда пользователь наводит курсор мыши на иконку, она делает поворот на 360^0.
Я уверен, что вы видели на блогах или сайтах вращающуюся иконку RSS, социальных сетей Твитер, ВКонтакте, Одноклассники.
Если вы такого не встречали, можете посмотреть ее демонстрацию.

[посмотреть на демонстрацию]

Эффект вращения иконки для сайта делается с помощью CSS свойства transform.

Ну что, приступим.
Для примера нам потребуются иконки.

Как сделать вращающиеся иконки для сайта на CSS?

Создайте папку «img-ico» и залейте в нее иконки.

Создайте html-файл или откройте для редактирования существующий файл и добавьте между тегами <body></body> вот этот код:

<p id="socialicons">
<a href="/"><img border="0" src="img-ico/rss.png" /></a>
<a href="/"><img border="0" src="img-ico/f.png" /></a>
<a href="/"><img border="0" src="img-ico/t.png" /></a>
<a href="/"><img border="0" src="img-ico/y.png" /></a>
</p>

В CSS ставите вот этот код:

*
{
margin:5px; /* размер между иконками */
}

/* здесь указываете количество переходов кадров в секунду */
p#socialicons img{
-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);
 }

В принципе, подсказки в коде я прописал. То есть, чтобы задать время эффекту (быстрый или медленный поворот), пропишите нужные секунды, сейчас на примере «0.8s».

/* здесь указываете количество переходов кадров в секунду */
p#socialicons img{
-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;
 }

Если нужно поменять градус, например, чтобы иконка не делала полный поворот на 360⁰, а только на 60⁰ или 45⁰, тогда нужно просто указать необходимый градус. В примере у меня стоит «360deg»

/* здесь указываете градус поворота */
p#socialicons img:hover{
-moz-transform: rotate(360deg);
-webkit-transform: rotate(360deg);
-o-transform: rotate(360deg);
-ms-transform: rotate(360deg);
transform: rotate(360deg);
 }

Еще добавлю то, что иконки крутятся в правую сторону, чтобы поменять сторону поворота, достаточно к градусу поставить минус «-». Вот так:

/* здесь указываете градус поворота */
p#socialicons img:hover{
-moz-transform: rotate(-360deg);
-webkit-transform: rotate(-360deg);
-o-transform: rotate(-360deg);
-ms-transform: rotate(-360deg);
transform: rotate(-360deg);
 }

Итак, вот абсолютно готовый код:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Как сделать вращающиеся иконки для сайта на CSS на блоге BlogGood.ru</title>
<style ENGINE="text/css">
*
{
margin:5px; /* размер между иконками */
}

/* здесь указываете количество переходов кадров в секунду */
p#socialicons img{
-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);
 }
</style>
</head>
<body>
<p id="socialicons">
<a href="#"><img border="0" src="img-ico/rss.png" /></a>
<a href="#"><img border="0" src="img-ico/f.png" /></a>
<a href="#"><img border="0" src="img-ico/t.png" /></a>
<a href="#"><img border="0" src="img-ico/y.png" /></a>
</p>
<p><a href="/">Интересный блог Костаневича Степана - BlogGood.ru </a>
</body>
</html>

Вы можете скачать исходник:

[скачать исходник]