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

В этом уроке мы рассмотрим, как можно создать простую 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.5rem; }
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 градусов.


Источник: http://feedproxy.google.com/~r/ruseller/CdHX/~3/fxDfJJiUnek/lessons.php

Читать комменты и комментировать

Добавить комментарий / отзыв



Защитный код
Обновить

Простая CSS 3D карусель изображений | | 2013-06-16 01:39:18 | | Статьи Web-мастеру | | В этом уроке мы рассмотрим, как можно создать простую 3D карусель изображений, с помощью CSS3 и некоторых элементов HTML5.HTMLСтруктура данной галереи очень проста: восемь изображений расположены в | РэдЛайн, создание сайта, заказать сайт, разработка сайтов, реклама в Интернете, продвижение, маркетинговые исследования, дизайн студия, веб дизайн, раскрутка сайта, создать сайт компании, сделать сайт, создание сайтов, изготовление сайта, обслуживание сайтов, изготовление сайтов, заказать интернет сайт, создать сайт, изготовить сайт, разработка сайта, web студия, создание веб сайта, поддержка сайта, сайт на заказ, сопровождение сайта, дизайн сайта, сайт под ключ, заказ сайта, реклама сайта, хостинг, регистрация доменов, хабаровск, краснодар, москва, комсомольск |
 
Поделиться с друзьями: