Красивое вращение картинки при наведении CSS

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

Пример

HTML


<div class="beauty-rotate">
  <img src="image.jpg" alt="" />
</div>

CSS


.beauty-rotate {
  width: 300px;
  height: 300px;
  border: 4px double #bd6c46; /* Рамка */
  overflow: hidden;
  -webkit-transition: all 0.5s ease;
          transition: all 0.5s ease;
} 
.beauty-rotate:hover {
  border-radius: 50%;
  -webkit-transform: rotate(360deg);
          transform: rotate(360deg);
}