Анимация вращения при наведении курсора

Всем привет. Чтобы придать немного интерактивности или точнее живности элементам на странице сайта в современном веб-пространстве частенько используются различные анимационные эффекты.
В данной заметке мы рассмотрим один из таких примеров. Использование подобного эффекта скорее всего вам уже приходилось наблюдать – при наведении курсора мыши, элемент начинает вращаться.
Посредством использования transition и transform в CSS3 реализовать подобный эффект довольно просто, давайте рассмотрим, как это делается. В качестве самого элемента мы будем использовать изображение. Первым делом следует разместить изображение в теле документа страницы:

<img src="https://href.kz/example/rotate.png" />

После этого, сами эффекты мы прописываем в CSS:

img {
	border-radius: 50%;
	-webkit-transition: -webkit-transform .8s ease-in-out;
	transition:         transform .8s ease-in-out;
}

img:hover {
	-webkit-transform: rotate(360deg);
	transform: rotate(360deg);
}

Свойство transition является уникальным, и позволяет устанавливать эффект перехода между двумя состояниями элемента, которые в данном примере определены в виде псевдоэлемента :hover (наведение курсора на элемент). Цикл вращения задается посредством «rotate» где и указывается величина в градусах, т.е. 360 градусов (полный оборот). Скорость вращения элемента задана в стилях элемента img – обратите внимание на значение «.8s», изменяя это значение вы можете подстроить нужную вам скорость анимации.

Пример демонстрации

Кстати, можно заставить вращаться элемент бесконечно, без воздействия пользователя. Как сделать бесконечную анимацию вращения на CSS читайте в этой статье.