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

Question

Я хочу узнать, как сделать вращающееся изображение, когда на него наводится курсор.
Хотелось бы понять, как реализовать эту функциональность с помощью CSS и следующего кода:

img {
  border-radius: 50%;
}

<img src="http://i.imgur.com/3DWAbmN.jpg" />

_{Свободный перевод вопроса Spin or rotate an image on hover от участника @user3597950.}

Answer 1

Вы можете использовать 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);
}

<img src="http://i.imgur.com/3DWAbmN.jpg" />

Ещё пример:

Вращение спирали

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);
}

<img src="https://i.stack.imgur.com/BLkKe.jpg" width="100" height="100"/>

Дополнительная информация и ссылки:

• Руководство по transitions CSS на MDN
• Руководство по transforms CSS на MDN
• Таблица поддержки браузера для 2d-transforms на caniuse.com
• Таблица поддержки браузера для transitions на caniuse.com

_{Свободный перевод ответа от участника @web-tiki.}

Answer 2

@keyframes _img {
  0% {
    -webkit-transform: rotateX(-360deg) translateZ(60px) rotateX(360deg);
    transform: rotateX(-360deg) translateZ(60px) rotateX(360deg);
  }
  25% {
    -webkit-transform: rotate(360deg);
    -webkit-filter: drop-shadow(0px 0px 20px hsla(240, 80%, 50%, 1));
    transform: rotate(360deg);
    filter: drop-shadow(0px 0px 20px hsla(240, 80%, 50%, 1));
  }
  50% {
    -webkit-transform: rotate(0deg);
    -webkit-filter: drop-shadow(0px 0px 20px hsla(240, 80%, 50%, 1));
    transform: rotate(0deg);
    filter: drop-shadow(0px 0px 20px hsla(240, 80%, 50%, 1));
  }
  100% {
    -webkit-transform: rotateX(0deg) translateZ(60px) rotateX(0deg);
    transform: rotateX(0deg) translateZ(60px) rotateX(0deg);
  }
}
div {
  border: 1px solid hsla(0, 0%, 100%, 1);
  display: block;
  position: relative;
  width: calc(20vw);
  height: calc(20vw);
  margin: 0% auto;
  background: hsla(0, 0%, 60%, 1);
  box-shadow: inset .75em .75em .75em hsla(0, 0%, 100%, 1), inset -.75em -.75em .75em hsla(0, 0%, 100%, 1);
  perspective: 300px;
  transform-style: preserve-3d;
  transition: all 1s linear 0s;
}
img {
  border-radius: 50%;
  border: 1px solid hsla(0, 0%, 60%, 1);
  position: absolute;
  width: calc(8vw);
  height: calc(8vw);
  top: calc(100%/3 - 3%);
  left: calc(100%/3 - 4%);
  -webkit-filter: drop-shadow(0px 0px 40px hsla(70, 80%, 40%, 1));
  -webkit-transform: rotateX(0deg) translateZ(60px) rotateX(0deg);
  filter: drop-shadow(0px 0px 40px hsla(70, 80%, 40%, 1));
  transform: rotateX(0deg) translateZ(60px) rotateX(0deg);
}
div:hover img {
  animation: _img 3s 0s linear;
}

<div>
  <img src="http://i.imgur.com/3DWAbmN.jpg" />
</div>