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

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

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

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

Шаг 1. HTML

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

<!DOCTYPE html>
<html>
<head>
 <script src="jquery-1.6.4.min.js"></script>
 <script>
 $(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 class="content">
 <div class="img_c"><img class="img1" src="img/01.jpg"/></div>
 <div class="img_c"><img class="img2" src="img/02.jpg"/></div>
 <div class="img_c"><img class="img3" src="img/03.jpg"/></div>
 <div class="img_c"><img class="img4" src="img/04.jpg"/></div>
 <div class="img_c"><img class="img5" src="img/05.jpg"/></div>
 <div class="img_c"><img class="img6" src="img/06.jpg"/></div>
 <div class="img_c"><img class="img7" src="img/07.jpg"/></div>
 <div class="img_c"><img class="img8" src="img/07.jpg"/></div>
 <div class="img_c"><img class="img9" src="img/09.jpg"/></div>
 <div class="img_c"><img class="img10" src="img/09.jpg"/></div>
 </div>
</body>
</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 секунды в одну сторону, потом в другую.

Вот и все. Готово!

Материал взят из зарубежного источника. И представлен исключительно в ознакомительных целях.

Интересно:

Print article

Опубликовал admin 25.09.2012 в 18:44, в категории CSS. Вы можете следить за комментариями через RSS 2.0. Вы можете перейти в конец записи и оставить комментарий. Пинги запрещены.

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

Шаг 1. HTML

Вот и все. Готово!

Читайте также:

Интересно:

Наши партнеры

Опрос блога

Подписывайтесь

Популярные статьи

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

Шаг 1. HTML

Вот и все. Готово!

Читайте также:

Интересно:

Зайти

Наши партнеры

Опрос блога

Подписывайтесь

Популярные статьи