В этом уроке мы рассмотрим, как можно создать простую 3D карусель изображений, с помощью CSS3 и некоторых элементов HTML5. HTML Структура данной галереи очень проста: восемь изображений расположены в элементе figure, обвёрнутый в div. 01 <div id=gallery> 02 <figure id=spinner > 03 <img src=wanaka-tree.jpg alt=""> 04 <img src=still-lake.jpg alt=""> 05 <img src=pink-milford-sound.jpg alt=""> 06 <img src=paradise.jpg alt=""> 07 <img src=morekai.jpg alt=""> 08 <img src=milky-blue-lagoon.jpg alt=""> 09 <img src=lake-tekapo.jpg alt=""> 10 <img src=milford-sound.jpg alt=""> 11 </figure> 12 </div> CSS Изначальный CSS тоже очень прост: все изображения будут расположены вокруг элемента figure по оси z. Скорость движения выставлена в опции transition. 1 body { background: #100000; font-size: 1.5em; } 2 div#gallery { perspective: 1200px; } 3 figure#spinner { transform-style: preserve-3d; min-height: 122px; transform-origin: 50% 50% -500px; transition: 1s; } 4 figure#spinner img { width: 40%; position: absolute; left: 30%; transform-origin-z: 50% 50% -500px; outline: 1px solid transparent; } Далее равномерно располагаем все изображения вокруг центральной оси, с помощью nth-child: 1 figure#spinner img:nth-child(1) { transform:rotateY(0deg); } 2 figure#spinner img:nth-child(2) { transform:rotateY(-45deg); } 3 figure#spinner img:nth-child(3) { transform:rotateY(-90deg); } 4 figure#spinner img:nth-child(4) { transform:rotateY(-135deg); } 5 figure#spinner img:nth-child(5) { transform:rotateY(-180deg); } 6 figure#spinner img:nth-child(6) { transform:rotateY(-225deg); } 7 figure#spinner img:nth-child(7) { transform:rotateY(-270deg); } 8 figure#spinner img:nth-child(8) { transform:rotateY(-315deg); } При увеличении размеров экрана, изображения будут оставаться такими же, а расстояние между ними - расти. В данном листинге были убраны префиксы браузеров. Полный код сможете найти в исходниках. JavaScript Также нам нужно вставить несколько дополнительных элементов, с помощью которых мы будем прокручивать карусель в ту или иную сторону. Добавим для этого 2 ссылки: 1 <a href=# style=float:leftonclick="galleryspin('-')">?</a> 2 <a href=# style=float:rightonclick="galleryspin('')">?</a> При клике на левую стрелку в galleryspin передастся знак минус: 1 var angle = 0; 2 function galleryspin(sign) { 3 spinner = document.querySelector("#spinner"); 4 if (!sign) { angle = angle + 45; } else {angle = angle - 45; } 5 spinner.setAttribute("style","-webkit-transform: rotateY("+ angle +"deg); transform: rotateY("+ angle +"deg);"); 6 } В зависимости от полученного значения, содержимое галереи будет смещено на 40 градусов.