Техно-мир

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

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

Структура HTML

360 degree spin onmouseover and onmouseout


















60 degree spin onmouseover and onmouseout


















-360 degree spin onmouseover ONLY

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

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

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

Вернуться назад