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

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

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

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

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

Код HTML

Code

Код 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 секунда. Пожалейте мальчишку!