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

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

24.04.201645304admin

Это пример использования вращения на 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 секунда. Пожалейте мальчишку!




Сохраните в социальную сеть
Комментарии (4)
Вынесло xD Смотрю теперь часами :з
1
Рожа пацана xDDD
0
Евгений 25.04.2016 в 11:57Спам
Испытание, прошло на отлично, пора и в космос отправлять!
1
Zafar Lanigiro 25.04.2016 в 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
Чтобы оставить комментарий под этой публикацией,
зарегистрируйтесь или войдите.
Рейтинг лучших сервисов для самостоятельного создания сайта.
Лучшие конструкторы
Легко! Если пользоваться нашими советами.
Создать сайт