Главная страница » CSS » Эффект вращения изображения с помощью CSS

Эффект вращения изображения с помощью CSS

В последнее время методики разработки весьма расширились, новые приемы и подходы весьма упрощают верстку при этом возможности хорошего разработчика ограничиваются только фантазией мастера. В данном уроке мы рассмотрим возможности небольшой анимации с помощью css и jquery. Этот эффект будет работать только в браузерах поддерживающих трансформации, во всех остальные эффект будет отображаться некорректно. С помощью данного преобразования можно отлично подчеркнуть необходимую информацию на сайте.

ДЕМОНСТРАЦИЯ ИСХОДНИКИ

Данный эффект полностью основан на правилах CSS. Тогда зачем тут нужен jQuery? Данная нужен для автоматизации генерации CSS кода. И так, приступим.

Шаг 1. HTML

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

<!DOCTYPE html>

<html>

<head>

$(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>

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