Простая CSS 3D карусель изображений

demosourse

В этом уроке мы рассмотрим, как можно создать простую 3D карусель изображений, с помощью CSS3 и некоторых элементов HTML5.

HTML

Структура данной галереи очень проста: восемь изображений расположены в элементе figure, обвёрнутый в div.

<div id=gallery>
<figure id=spinner >
<img src=wanaka-tree.jpg alt="">
<img src=still-lake.jpg alt="">
<img src=pink-milford-sound.jpg alt="">
<img src=paradise.jpg alt="">
<img src=morekai.jpg alt="">
<img src=milky-blue-lagoon.jpg alt="">
<img src=lake-tekapo.jpg alt="">
<img src=milford-sound.jpg alt="">
</figure>
</div>

CSS

Изначальный CSS тоже очень прост: все изображения будут расположены вокруг элемента figure по оси z. Скорость движения выставлена в опции transition.

body { background: #100000; font-size: 1.5em; }
div#gallery { perspective: 1200px; }
figure#spinner { transform-style: preserve-3d; min-height: 122px; transform-origin: 50% 50% -500px; transition: 1s; }
figure#spinner img { width: 40%; position: absolute; left: 30%; transform-origin-z: 50% 50% -500px; outline: 1px solid transparent; }

Далее равномерно располагаем все изображения вокруг центральной оси, с помощью nth-child:

figure#spinner img:nth-child(1) { transform:rotateY(0deg); }
figure#spinner img:nth-child(2) { transform:rotateY(-45deg); }
figure#spinner img:nth-child(3) { transform:rotateY(-90deg); }
figure#spinner img:nth-child(4) { transform:rotateY(-135deg); }
figure#spinner img:nth-child(5) { transform:rotateY(-180deg); }
figure#spinner img:nth-child(6) { transform:rotateY(-225deg); }
figure#spinner img:nth-child(7) { transform:rotateY(-270deg); }
figure#spinner img:nth-child(8) { transform:rotateY(-315deg); }

При увеличении размеров экрана, изображения будут оставаться такими же, а расстояние между ними - расти.

В данном листинге были убраны префиксы браузеров. Полный код сможете найти в исходниках.

JavaScript

Также нам нужно вставить несколько дополнительных элементов, с помощью которых мы будем прокручивать карусель в ту или иную сторону. Добавим для этого 2 ссылки:

<a href=# style=float:leftonclick="galleryspin('-')">?</a>
<a href=# style=float:rightonclick="galleryspin('')">?</a>

При клике на левую стрелку в galleryspin передастся знак минус:

var angle = 0;
function galleryspin(sign) {
spinner = document.querySelector("#spinner");
if (!sign) { angle = angle + 45; } else {angle = angle - 45; }
spinner.setAttribute("style","-webkit-transform: rotateY("+ angle +"deg); transform: rotateY("+ angle +"deg);");
}

В зависимости от полученного значения, содержимое галереи будет смещено на 40 градусов.

Данный урок подготовлен для вас командой сайта ruseller.com
Источник урока: http://demosthenes.info/blog/690/Simple-CSS-3D-Carousel-Gallery
Перевел: Станислав Протасевич
Урок создан: 7 Июня 2013
Просмотров: 42178
Правила перепечатки

5 последних уроков рубрики "HTML и DHTML"

^ Наверх ^