7

Есть круглая растровая картинка.

<img src="http://photoholic24.com/wp-content/uploads/2012/01/smile_b.jpg" width="100" height="100" />

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

4
  • что значит вращаться по кругу?
    – Grundy
    29 июн 2016 в 10:17
  • @Grundy по часовой стрелке переворачиваться
    – Вася
    29 июн 2016 в 10:19
  • на одном месте? просто крутиться?
    – Grundy
    29 июн 2016 в 10:20
  • @Grundy да все правильно как колесо на одном месте
    – Вася
    29 июн 2016 в 10:21

3 ответа 3

18

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);
  }
}
<img class="rot" src="https://cdn.iconscout.com/icon/free/png-256/grinning-face-smile-emoji-happy-37705.png">

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

<!DOCTYPE html>
<html>

<head>
  <title>titile</title>
  <meta charset="utf-8">
  <style>
    img.rot {
      animation: 3s ease-in 0s normal none infinite running rot;
      -webkit-animation: 1s linear 0s normal none infinite running rot;
      animation-timing-function: steps(8, end);
      width: 100px;
    }
    @keyframes rot {
      0% {
        transform: rotate(0deg);
      }
      100% {
        transform: rotate(360deg);
      }
    }
    @-webkit-keyframes rot {
      0% {
        transform: rotate(0deg);
      }
      100% {
        transform: rotate(360deg);
      }
    }
  </style>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
  <script>
    $(function() {

    });
  </script>
</head>

<body>

  <img class="rot" src="https://cdn.iconscout.com/icon/free/png-256/grinning-face-smile-emoji-happy-37705.png">

</body>

</html>

4
  • да, вот так! супер! спасибо
    – Вася
    29 июн 2016 в 10:23
  • именно так и устроена анимация у font-awesome
    – user33274
    25 июл 2016 в 9:43
  • Подскажите , тут картинка крутиться слева направо , а как сделать наоборот ? что бы изображение крутилось справа налево ? 21 янв 2020 в 15:59
  • @ArnoldжеFree поменять местами 0 и 360 21 янв 2020 в 16:06
4

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

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

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

img{
  animation: spin 5s linear 0s infinite;
}
<img src="http://photoholic24.com/wp-content/uploads/2012/01/smile_b.jpg" width="100" height="100" />

2
  • спасибо! единственное, что @Jean-Claude написал первым
    – Вася
    29 июн 2016 в 10:35
  • 1
    @Вася, ага, я долго описание смотрел :) поэтому добавил его, чтобы было где дальше смотреть
    – Grundy
    29 июн 2016 в 10:36
2

Анимация вращения при наведении курсора

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" />

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.