Вращение картинки анимация css

Опубликовано: 17.06.2021 в категории: HTML/CSS

Вращение картинки можно легко реализовать прописав соответствующие стили в файл CSS. С помощью нехитрых действий, можно заставить вращаться колесо, шар, крылья ветряной мельницы, да в общем любое изображение на вашем сайте. Давайте заставим крутиться «Колесо фортуны». Выглядеть это будет примерно так:

вращение картинки
Для того, чтобы осуществить вращение картинки, мы вставляем код нашей картинки в страничку, незабывая правильно указать к ней путь и прописываем ей какой-нибудь класс,  допустим «crug»:

<div><img class="crug" src="fortuna.png" /></div>

А далее в файле css прописываем стили анимации для нашего класса:

img.crug {
margin-top:20px;
width: 200px;
-webkit-animation-name: rotation;
-webkit-animation-duration: 5s;
-webkit-animation-iteration-count: infinite;
-webkit-animation-timing-function: linear;
-moz-animation-name: rotation;
-moz-animation-duration: 5s;
-moz-animation-iteration-count: infinite;
-moz-animation-timing-function: linear;
-o-animation-name: rotation;
-o-animation-duration: 5s;
-o-animation-iteration-count: infinite;
-o-animation-timing-function: linear;
animation-name: rotation;
animation-duration: 5s;
animation-iteration-count: infinite;
animation-timing-function: linear;
}

@-webkit-keyframes rotation {
0% {-webkit-transform:rotate(0deg);
-moz-transform:rotate(0deg);
-o-transform:rotate(0deg);
transform:rotate(0deg);}
100% {-webkit-transform:rotate(360deg);
-moz-transform:rotate(360deg);
-o-transform:rotate(360deg);
transform:rotate(360deg);}
}
@-moz-keyframes rotation {
0% {-webkit-transform:rotate(0deg);
-moz-transform:rotate(0deg);
-o-transform:rotate(0deg);
transform:rotate(0deg);}
100% {-webkit-transform:rotate(360deg);
-moz-transform:rotate(360deg);
-o-transform:rotate(360deg);
transform:rotate(360deg);}
}
@-o-keyframes rotation {
0% {-webkit-transform:rotate(0deg);
-moz-transform:rotate(0deg);
-o-transform:rotate(0deg);
transform:rotate(0deg);}
100% {-webkit-transform:rotate(360deg);
-moz-transform:rotate(360deg);
-o-transform:rotate(360deg);
transform:rotate(360deg);}
}
@keyframes rotation {
0% {-webkit-transform:rotate(0deg);
-moz-transform:rotate(0deg);
-o-transform:rotate(0deg);
transform:rotate(0deg);}
100% {-webkit-transform:rotate(360deg);
-moz-transform:rotate(720deg);
-o-transform:rotate(360deg);
transform:rotate(360deg);}
}

Вот так легко мы создали анимацию — вращение картинки через css. Читайте так-же об эффектах CSS с блоками. Удачи всем!

бесплатная накрутка подписчиков вконтакте

Самое читаемое:

Всего комментариев: 0

Оставить комментарий

Ваш email не будет опубликован.

Заявка на бесплатную консультацию

Для бесплатной консультации укажите свое имя и номер телефона в форме ниже. Я перезвоню Вам и отвечу на все вопросы.

    Даю свое согласие на обработку персональных данных.

    ×
    Заказать сайт

    Чтобы заказать сайт заполните форму ниже. Я перезвоню Вам, отвечу на все вопросы, приму Ваш заказ и назову его ориентировочную стоимость.

      Даю свое согласие на обработку персональных данных.

      ×
      Заказать сайт по акции "Все включено"

      Для заказа сайта по акции «Все включено» заполните форму ниже. Я перезвоню Вам, отвечу на все вопросы, и приму Ваш заказ.

        Даю свое согласие на обработку персональных данных.

        ×
        Заказ услуги

        Для заказа услуги заполните форму ниже. Я перезвоню Вам, чтобы уточнить подробности, оговорить сроки и стоимость услуги.

          Даю свое согласие на обработку персональных данных.

          ×