» »

Создать вращение элемента при наведение CSS


Создать вращение элемента при наведение CSS

Безусловно вращение элемента привлекает пользователей на сайте. Вы можете поставить как на социальные кнопки так другие элементы. Сам элемент вращение очень необычен и смотрится оригинально и конечно он будет заметен. Вы теперь сможете его установить на свой портал на любой элемент и он будет делать круг на 180 градусов при наведение клика.

Здесь все будет на чистом стиле и не будет использоваться javascript как это делают остальные или многие. Также некоторые подцепляют дополнительные плагины, что грузит сайт, но как поняли в нашем случай все очень просто.

Чтоб все получилось и работало корректно, здесь нужны два параметра CSS.

transition - Отвечает за время анимации, а точнее прокрутки.
transform - Вот это параметр, как раз будет задавать анимацию и отвечать за само вращение изображение или иконки.

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

Код
class="block"


Теперь идем в стили CSS и пропишем:

Код
.block{float:left;width:32px;height:32px;margin-right:5px;-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; }
.block:hover{-moz-transform: rotate(360deg); -webkit-transform: rotate(360deg); -o-transform: rotate(360deg); -ms-transform: rotate(360deg); transform: rotate(360deg);}


Как пример проверки, просто перешел на "Добавить материал" и подключил Панель HTML кодов и просто загрузил логотип, у всех будет так, кроме ссылки.

Код
<img border="0" align="absmiddle" src="http://zornet.ru/Aben/Abryn/95881948.png">


Потом добавил класс block и получилось так:

Код
<img border="0" align="absmiddle" class="block" src="http://zornet.ru/Aben/Abryn/95881948.png">


И все при наведение произошло вращение.

Это к чему?

Если у вас на сайте стоит логотип или небольшая картинка дизайн, то просто добавляем класс=block и все будет работать.

Давайте разберем значение и за что они отвечают.

Если брать это значение 0.8s которое в стилях прописано. То будет отвечать за секунды, значит за такое время произойдет вращение, здесь вы сами можете задать.

Но и второе, тоже значительное, это 360deg - что отвечает за градусы, на сколько поворот будет, здесь как видим полный оборот. Если вам нужно, чтоб только пошевелился и встало на свое место, то просто уменьшаем.
25.12.2016 Просмотров: 706 Комментарий: (2)

Поделиться в социальных сетях

Материал разместил

Комментарий: 2
Brung
Brung 27.12.2016 03:041
0
Есть стили, на которые не нужно клик наводить, а сам логотип автаматичекски при открытие уже в эффектами, примерно как на вебматере юкоз сайте.
Kosten
Kosten 03.01.2017 21:512
0
Там нужно только класс выставить, то наводишь и не чего не меняется, клик остается. Недавно как раз на один скрипт устанавливал его, уже забыл. 11a
avatar