Эксперимент с анимацией и поворотом с помощью CSS и JQuery

Сегодня попробуем провести небольшой эксперимент с анимацией на CSS&jQuery.

Сам пример работает только в браузерах Firefox и Chrome. В Safari эксперимент не проверялся. Также есть возможность добавить поддержку для Оперы. Напишите в комментариях, если такая реализация вам будет нужна. Сделаем.

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

Наверное, вы спросите, зачем нужен jQuery? Все анимацию можно реализовать и на CSS. Но jQuery нужен для автоматизации генерации CSS кода, вот и все.

Смотрим код:

<!DOCTYPE html>

<html>

<head>

<title>CSS Rotate And Animation</title>

$(function() {

var tot = $(".img_c").length;

var stat = deg = 10;

var rotate = "";

var frame, mozframe, webkitframe;

$("img").each(function(index) {

$(this).css({

"transform": "rotate("+deg+"deg)",

"-moz-transform": "rotate("+deg+"deg)",

"-webkit-transform": "rotate("+deg+"deg)",

"-o-transform": "rotate("+deg+"deg)"

});

rotate = "100% {" +

"transform: rotate(360deg);" +

"-moz-transform: rotate(360deg);" +

"-webkit-transform: rotate(360deg);" +

"-o-transform: rotate(360deg);" +

"} ";

var imgclass = parseInt(index+1);

frame = " @keyframe anim" + imgclass + " { " +

rotate + "}";

mozframe = " @-moz-keyframes anim" + imgclass + " { " +

rotate + "}";

webkitframe = " @-webkit-keyframes anim" + imgclass + " { " +

rotate + "}";

$('<style> '+ frame + mozframe + webkitframe +

' .img'+imgclass+' { animation: anim'+imgclass+' 3s ease 0s infinite alternate;' +

'-moz-animation: anim'+imgclass+' 3s ease 0s infinite alternate;' +

'-webkit-animation: anim'+imgclass+' 3s ease 0s infinite alternate; }'

+'</style>').appendTo('head');

deg = deg + stat;

});

</script>

<style>

body {

background: #fff url('wood_pattern.png') repeat top right;

}

.content {

margin: 0 auto;

padding: 100px;

}

img {

margin: 10px;

padding: 20px;

background: #fff;

-moz-box-shadow: 0px 0px 3px #d3d3d3;

-webkit-box-shadow: 0px 0px 3px #d3d3d3;

box-shadow: 0px 0px 3px #d3d3d3;

position: absolute;

}

</style>

</head>

<body>

</div>

</body>

</html>

Вы, наверное, уже поняли на сколько прост jQuery код. В результате на выходе мы получаем веерную анимацию вращающихся изображений на 360 градусов за 3 секунды в одну сторону, потом в другую.

Смотрим пример.

Пример