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

#html #css #css3 #анимация #hover

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



img {
  border-radius: 50%;
}




    

Ответы

Ответ 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 {
  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


Ответ 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;
}