Вращение картинки анимация 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