Простая 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
Просмотров: 41030
Правила перепечатки

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

или авторизуйтесь, чтобы добавлять комментарии, оценивать уроки и сохранять их в личном кабинете
  • 7 Июня 2013 17:44
    MaXFull
    Не видно смены картинок
  • 7 Июня 2013 21:46
    dimasp
    в опере вообще не пашет
    • 8 Июня 2013 08:16
      TOIIOP
      В 15 версии работает -)
  • 8 Июня 2013 08:16
    master_z1zzz
    Какой смысл публиковать такой урок, если он не работает?
    • 8 Июня 2013 08:34
      TOIIOP
      Работает все.
    • 8 Июня 2013 09:02
      Inik1I
      У меня работает(Chrome).
  • 8 Июня 2013 09:14
    rubyx
    одна картинка на всю карусель в Firefox, в Chrome вроде работает :)
  • 8 Июня 2013 09:33
    ppaull
    Очень просим - не надо снова возвращаться к подобным бесполезным урокам!
    • 8 Июня 2013 12:54
      Gerrar
      Если Вас не интересуют такие уроки, можно просто пропустить пост и не обращать на него внимания
  • 8 Июня 2013 12:53
    Gerrar
    неработает в Opera :(
  • 11 Июня 2013 10:43
    Khimar
    Извините, но это недоработанная херня!
  • 11 Июля 2013 08:03
    дщдщдщ
    согласен с Khimar
  • 15 Июля 2013 14:32
    Шамиль Алисултанов
    Классная Галерея Спасибо)
  • 22 Июля 2013 19:54
    Kweckey
    Никакой кросс-браузерности. Тема крутая, если переделать с умом (слишком громадная), однако осуществление на уровне "Посоны глянь чо умею". Без обид, но это так.
  • 30 Октября 2013 13:35
    jasonalt
    "В данном листинге были убраны префиксы браузеров. Полный код сможете найти в исходниках." ЧТО НЕ ПО РУССКИ НАПИСАНО, ИЛИ НЕ ТЕМ ЦВЕТОМ? КАК ВООБЩЕ МОЖНО ОСУЖДАТЬ АВТОРА КОТОРЫЙ СТАРАЛСЯ И ВОЯЛ, А ВЫ ДАЖЕ В ИСХОДНИКАХ РАЗОБРАТЬСЯ НЕ МОЖЕТЕ. ЭТО ГОВОРИТ О ВАШЕМ УРОВНЕ ПОЗНАНИЙ.
  • 19 Сентября 2014 09:22
    georgi2541
    Круто!Спасибо
  • 9 Марта 2016 23:11
    sanel
    размеры картинок поменяйте на меньшие 200х150 примерно
^ Наверх ^