Вращение или поворот изображения при наведении

Я хочу узнать, как сделать вращающееся изображение, когда на него наводится курсор. Хотелось бы понять, как реализовать эту функциональность с помощью CSS и следующего кода:
img { border-radius: 50%; }
Перевод вопроса: Spin or rotate an image on hover

Ответ

Вы можете использовать transitions CSS3 для вращения изображения при наведении.
Rotating image :
img { border-radius: 50%; -webkit-transition: -webkit-transform .8s ease-in-out; transition: transform .8s ease-in-out; } img:hover { -webkit-transform: rotate(360deg); transform: rotate(360deg); }
Дополнительная информация и ссылки:
Руководство по transitions CSS на MDN Руководство по transforms CSS на MDN Таблица поддержки браузера для 2d-transforms на caniuse.com Таблица поддержки браузера для transitions на caniuse.com
Перевод ответа: Spin or rotate an image on hover @web-tiki