Вращение картинки по кругу на CSS

Вращение картинки по кругу на CSS — весьма интересный эффект для Вашего сайта. Допустим, у Вас есть какое-либо изображение и Вы хотите, чтобы оно вращалось по кругу, при этом не очень хочется использовать JavaScript. Нет никаких проблем, давайте сделаем это на чистом CSS. Ниже я приведу сразу весь код, а потом обсудим.

Вращение картинки по кругу на CSS

img.rot {
  animation: 1s linear 0s normal none infinite running rot;
  -webkit-animation: 1s linear 0s normal none infinite running rot;
  width: 100px;
}
@keyframes rot {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
@-webkit-keyframes rot {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
<img class="rot" src="https://cruelten.ru/wp-content/themes/cruelten/img/med.jpg">

Теперь немного пояснения. @keyframes — это правило CSS3, благодаря которому собственно происходит наша анимация. Оно говорит нам, что нужно повернуть картинку на 360 градусов. Все очень просто. Более подробно о анимации Вы можете прочитать в материалах по CSS3, которых полно в интернете.