Это пример использования вращения на CSS.
Вращение изображения на CSS работает только в браузерах на движке Webkit.
Это не совсем скрипт, просто CSS-решение, но больше подходит в данную категорию.
Чтобы вы не заскучали, я сделал следующую штуку. Изначально была просто округленная фотография, в которой мальчик крутится. Пусть он крутится в стиральной машине, это выглядит интереснее. Ссылка на демо под материалом.
Код
HTML Код
<img src="http://yraaa.ru/test/108/photo.png" class="turntable" />
Код
CSS Код
/* ===[ 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;
}
– класс, к которому применяется анимация.
360deg – градус поворота.
1s – скорость анимации. В данном случае 1 секунда. Пожалейте мальчишку!
К данному материалу нет комментариев, но Вы можете стать первым, оставив свой комментарий!