Яндекс.Метрика

Дизайн-журнал №1. Актуальная информация для дизайнеров, веб дизайнеров, программистов и разработчиков сайтов.

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

10 мая 2012 | Опубликовано в css | 6 Комментариев »

Сегодня мы научимся создавать вращающиеся графические элементы при помощи css3. Такие эффекты часто используются в веб-дизайне для логотипов, потому что очень привлекают к себе внимание. Наведите курсором мыши на иконку, и вы увидите, как она вращается по своей собственной оси. 

rotate(xdeg). С его помощью можно поворачивать элемент на любое количество градусов по часовой стрелке или против часовой стрелки. Давайте посмотрим несколько примеров (кроссбраузерность (IE10+, FF3.5+, Chrome/Safari, and Opera 10+)

Смотрите демонстрацию

Структура HTML

<p><b>360 degree spin onMouseover and onMouseout</b></p>
<p id="socialicons">
<a href="http://www.dynamicdrive.com/">
<img border="0" src="rss.png" /></a>
<a href="http://www.dynamicdrive.com/">
<img border="0" src="delicious.png" /></a>
<a href="http://www.dynamicdrive.com/">
<img border="0" src="facebook.png" /></a>
<a href="http://www.dynamicdrive.com/">
<img border="0" src="twitter.png" /></a>
<a href="http://www.dynamicdrive.com/">
<img border="0" src="yahoo.png" /></a>
</p>
<p><b>60 degree spin onMouseover and onMouseout</b></p>
<p id="socialicons2">
<a href="http://www.dynamicdrive.com/">
<img border="0" src="rss.png" /></a>
<a href="http://www.dynamicdrive.com/">
<img border="0" src="delicious.png" /></a>
<a href="http://www.dynamicdrive.com/">
<img border="0" src="facebook.png" /></a>
<a href="http://www.dynamicdrive.com/">
<img border="0" src="twitter.png" /></a>
<a href="http://www.dynamicdrive.com/">
<img border="0" src="yahoo.png" /></a>
</p>
<p><b>-360 degree spin onMouseover ONLY</b></p>
<p id="socialicons3">
<a href="http://www.dynamicdrive.com/">
<img border="0" src="rss.png" /></a>
<a href="http://www.dynamicdrive.com/">
<img border="0" src="delicious.png" /></a>
<a href="http://www.dynamicdrive.com/">
<img border="0" src="facebook.png" /></a>
<a href="http://www.dynamicdrive.com/">
<img border="0" src="twitter.png" /></a>
<a href="http://www.dynamicdrive.com/">
<img border="0" src="yahoo.png" /></a>
</p>

Добавляем стили

 

<style>
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>

Иконки можно скачать здесь

По материалам dynamicdrive




Комментарии

  1. Andrew Gurylyov
    Thumb up Thumb down +1

    Самая фишка вращения в том, что его можно сделать inital, то есть бесконечным. Вот это выглядит забавно.

    Ответить

    Юлия Ответ:

    Thumb up Thumb down 0

    А подскажите что нужно сделать, чтобы вращение не прекращалось. Код желательно.

    Ответить

    Andrew Gurylyov Ответ:

    Thumb up Thumb down +1

    Да, конечно, держите пример jsfiddle.net/Gurylyov/sRnw3/

    Ответить

    Юлия Ответ:

    Thumb up Thumb down 0

    Спасибо, прикольный эффект, обязательно сделаю)))

    Ответить

    Andrew Gurylyov Ответ:

    Thumb up Thumb down 0

    кстати, со словом я не нарочно ошибся. не inital, а infinite.

    Ответить

  2. Екатерина
    Thumb up Thumb down +2

    Для меня это всёже как то неочень понятно :-[

    Ответить

Оставить ответ


один + 1 =

Вставить изображение