Вращение изображения при наведении

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

1. Переходы CSS3 с поворотом()

Используйте переходы CSS3 для плавного поворота изображения при наведении курсора. Свойство перехода определяет продолжительность и функцию плавности анимации. В этом случае мы устанавливаем продолжительность перехода на 0,7 секунды и указываем функцию замедления плавности.

img {
  transition: transform .7s ease-in-out;
}

2. Преобразование при наведении

Чтобы повернуть изображение при наведении, мы используем свойство Transform с функцией Rotate(), чтобы установить желаемый угол поворота. В этом примере мы поворачиваем изображение на 360 градусов.

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

3. Реализация HTML

В HTML-коде поместите элемент изображения с соответствующим источником и размером.

Пример Код

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

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

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

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