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

#html #jquery #css #css3

Есть картинка в виде круга








как ее заставить вращаться по кругу на одном месте (т.е. переворачиваться по часовой
стрелке - в положении 180 градусов смайл становится перевернутым) желательно на css?
    

Ответы

Ответ 1

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





Анимация по шагам))







  
  
  
  
  




  






Ответ 2

Можно воспользоваться свойством animation 

Которому можно задать анимацию, описанную в @keyframes, а так же настройки анимации:
продолжительной одной итерации, задержка перед запуском, количество повторений и т.д.



@keyframes spin {
    from {transform:rotate(0deg);}
    to {transform:rotate(360deg);}
}

img{
  animation: spin 5s linear 0s infinite;
}