Вращение картинки анимация 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 с блоками. Удачи всем!