Анимация вращения для изображения на CSS

Анимация вращения для изображения на CSS

02016-04-2448344Денис Абдуллин

Это пример использования вращения на CSS.
Вращение изображения на CSS работает только в браузерах на движке Webkit.

Это не совсем скрипт, просто CSS-решение, но больше подходит в данную категорию.

Чтобы вы не заскучали, я сделал следующую штуку. Изначально была просто округленная фотография, в которой мальчик крутится. Пусть он крутится в стиральной машине, это выглядит интереснее. Ссылка на демо под материалом.

Код HTML


Code
<img src="http://yraaa.ru/test/108/photo.png" class="turntable" />

Код CSS


Code
/* ===[ Turntable ]=== */

@-webkit-keyframes rotate {  
  0% { -webkit-transform: rotate(0deg) rotateY(0) scale(1) }

  100% { -webkit-transform: rotate(360deg) rotateY(0) scale(1) }
}

@-moz-keyframes rotate {  
  0% { -moz-transform: rotate(0deg) rotateY(0) scale(1) }

  100% { -moz-transform: rotate(360deg) rotateY(0) scale(1) }
}

@-ms-keyframes rotate {  
  0% { -ms-transform: rotate(0deg) rotateY(0) scale(1) }

  100% { -ms-transform: rotate(360deg) rotateY(0) scale(1) }
}

@keyframes rotate {  
  0% { transform: rotate(0deg) rotateY(0) scale(1) }

  100% { transform: rotate(360deg) rotateY(0) scale(1) }
}

img.turntable {
  -webkit-border-radius: 384px;
  -moz-border-radius: 384px;
  border-radius: 384px;
  -webkit-animation: rotate 1s linear infinite;  
  -moz-animation: rotate 1s linear infinite;
  -ms-animation: rotate 1s linear infinite;
  animation: rotate 1s linear infinite;
  margin: 20px;
}

turntable – класс, к которому применяется анимация.

360deg – градус поворота.

1s – скорость анимации. В данном случае 1 секунда. Пожалейте мальчишку!


Создать сайт в uKit Нужен классный сайт для бизнеса?
Воспользуйтесь сервисом uKit. Никакого кода!
Комментарии (4)
Влад Зубаиров 2012-08-04 в 13:25Спам
Вынесло xD Смотрю теперь часами :з
1
Кирилл Косырев 2012-08-04 в 14:05Спам
Рожа пацана xDDD
0
Евгений 2016-04-25 в 11:57Спам
Испытание, прошло на отлично, пора и в космос отправлять!
1
Zafar Lanigiro 2016-04-25 в 17:45Спам
Код
img.turntable {
  width:120px;
  -webkit-border-radius: 384px;
  -moz-border-radius: 384px;
  border-radius: 384px;
  -webkit-animation: rotate 0.0000099s linear infinite;  
  -moz-animation: rotate 0.0000099s linear infinite;
  -ms-animation: rotate 0.0000099s linear infinite;
  animation: rotate 0.0000099s linear infinite;
  margin: 20px;
}

Напишите такой стайл, и загипнотизируйте себя)))
0
Чтобы оставить комментарий или отзыв под этой публикацией, войдите или зарегистрируйтесь.