Как непрерывно вращать изображение с помощью CSS

При строительствеСправочник по Reactпосадочная страница, мне пришлось искать, как повернуть изображение. Я хотел повернутьSVGизображение, но это работает для любого типа изображения. Или вообще любой HTML-элемент.

Добавьте эту инструкцию CSS к элементу, который вы хотите повернуть:

animation: rotation 2s infinite linear;

Вы также можете добавитьrotateclass к элементу, а не нацеливать его напрямую:

.rotate {
  animation: rotation 2s infinite linear;
}

настроить2sдля замедления или ускорения периода вращения.

Затем добавьте эту строку вне любого селектора:

@keyframes rotation {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(359deg);
  }
}

Вот и все! Теперь ваши элементы должны вращаться.

ПроверьтеCSS анимациииCSS переходыгиды

Вот результат, показанный в Codepen:

См. ПероКак использовать CSS-анимацию для непрерывного поворота изображенияАвтор: Флавио Коупс (@flaviocopes) наCodePen.