Вращение (hover-rotate) картинки при наведении добавляет веб-странице интерактивности и делает её более привлекательной для пользователей. Рассмотрим, как с помощью HTML и CSS реализовать поворот изображения по оси.

Как создать эффект вращения?

HTML

Для начала необходимо создать структуру HTML:

<figure class="hover-rotate">
  <img src="example.jpg" alt="Sample Image"/>
</figure>

Соверешенно любое понравившееся изображение нужно поместить в контейнер figure c классом hover-rotate.

CSS

.hover-rotate {
  overflow: hidden;
  margin: 8px;
  min-width: 240px;
  max-width: 320px;
  width: 100%;
}

.hover-rotate img {
  transition: all 0.3s;
  max-width: 100%;
}

.hover-rotate:hover img {
  transform: scale(1.3) rotate(5deg);
}

Как это работает

Класс hover-rotate определяет размер картинки и обрезает её при необходимости.

Класс hover-rotate img создаёт эффект плавного перехода.

Благодаря CSS-свойству transform, при наведении мышки изображение увеличивается в 1,3 раза и смещается по оси на 5 градусов.

Заключение

Эффект вращения (hover-rotate) изображения при наведении эффективен и прост в реализации. Так незначительные действия существенно повышают привлекательность сайта для клиентов.

Спасибо за внимание.

Перевод статьи Uvais Codes “How to make Image rotate on hover using HTML and CSS”