X
  • Дизайн та розробка сайту
  • Дизайн і створення сайтів. Розробка тем для WordPress. Створення Landing Page.
  • office@gnatkovsky.com.ua
  • @vgnat
  • Написати мені
Замовити послугу

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

Приклад
  • 2024-10-06
  • 10827 переглядів

  • Дизайн та розробка сайту

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

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

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

Как же добиться вращения при наведении, спросите Вы? Все очень просто, с помощью обычного 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
Проголосовало: 10, в среднем: 4.2 из 5
Читайте також

Deprecated: Функція WP_Query викликана з аргументом, який вважається застарілим з версії 3.1.0! Вираз caller_get_posts застарілий. Використовуйте ignore_sticky_posts. in /var/www/vhosts/gnatkovsky.com.ua/gnatkovsky.com.ua/public/wp-includes/functions.php on line 6078