Вращение картинки по кругу на CSS - Творческая студия #Cruelten
Блог
Делимся с Вами своими знаниями и новостями
11.07.2018

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

Вращение картинки по кругу на 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, которых полно в интернете.

Метки:

Комментарии:

Свяжитесь с нами уже сейчас

Вы привыкли видеть здесь форму обратной связи. Ведь так? Ее делают почти все. Но исследуя поведение людей, мы пришли к выводу, что форма совершенно не нужна. В любом случае все сводится к обсуждению голосом Вашего проекта. А зачем нам тратить Ваше время на заполнение различных форм? Поэтому, звоните.