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

 

Примечание: Данный пример работает только с браузерами WebKit. В Safari можно просмотреть более плавную анимацию, и более удачная трансформация. Трансформации 3d еще не полностью поддерживается всеми браузерами. И так, приступим.

Шаг 1. HTML

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

С разметкой проблем возникнуть не должно, все достаточно просто, давайте рассмотрим стили.

Шаг 2. CSS

Большая часть тяжелой работы будет сделана с помощью JQuery. CSS просто настраивает каждый слайд, чтобы они могли свободно перемещаться в 3D пространстве, и убеждаемся, что браузер имеет полосу прокрутки. JQuery свяжет прокрутку для каждого слайда.

Проясним несколько основных моментов:

  • -webkit-transform: rotateY (10deg); — Это просто вращается все вдоль оси у.
  • -webkit-perspective: 1800px; — WebKit-перспектива которая регулирует то, как будет выглядеть 3d,

Шаг 3. jQuery

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

Небольшое пояснение. Мы сначала должны выяснить, где каждый слайд расположен на карусели, потом выяснить выяснить, во сколько градусов должно быть пространство от каждого слайда. Таким образом, мы делим круг в 360 градусов, из слайдов которые у нас есть.

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

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

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