Главная
Web-дизайн
Вращение элементов, кнопок, иконок, блоков при наведении с помощью CSS

Вращение элементов, кнопок, иконок, блоков при наведении с помощью CSS

Поворот при наведении

Доброго времени суток. 🙂

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

Как же добиться вращения при наведении, спросите Вы? Все очень просто, с помощью обычного CSS, без использования javascript, и других дополнительных плагинов.



Пример

Для того чтобы осуществить задуманное, нам понадобится два параметра CSS.

  • transition - параметр, который задаст время анимации.
  • transform - параметр, который создаст анимацию и будет вращать иконки.

И так, нам надо определится с тем элементом, который мы будим поворачивать. Потом задать ему класс или же если класс уже задан, дописать следующие стили. В нашем случаи класс у элемента - .block.

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

Просто элементу задаем параметр transition. Задаются много раз, для кроссбраузерности - -moz-transition, -webkit-transition, -o-transition, -ms-transition, transition.

Во всех одно значение - 0.8s, что означает, что анимация будет длится 0,8 секунды. Так что можете менять, чтобы ускорить или замедлить эффект.

Элементу при наведении (свойство - :hover) - задаем параметр transform. Он тоже задается много раз для кроссбраузерности и имеет значение - 360deg. Это градусы, на которые будет повернуто изображение. 360 - то есть полный оборот, если хотите задать не полный оборот, можете уменьшить значение.

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

На этом все, спасибо за внимание. 🙂




Если Вам был полезным мой труд, можете поддержать сайт, обменяться со мной текстовыми ссылками или посмотреть рекламку, что займет 2 минуты :)


Оцените статью
  1. 5
  2. 4
  3. 3
  4. 2
  5. 1
(3 голоса, в среднем: 5 из 5)

Добавить комментарий

Заполните поля ниже. Ваш e-mail не будет опубликован. Обязательные поля помечены *

Уважаемые пользователи! При добавлении комментариев на сайт Вам следует соблюдать правила указанные под формой отправки комментариев.

Соблюдайте добавления комментариев

Это не спам *

Нажмите, чтобы добавить код в комментарий