Красивый слайдер является неотъемлемой частью сайта который имеет широкий выбор изображений. В данном уроке речь пойдет о создании отличного слайдера с помощь  3D трансформаций CSS3. Для этого мы будем использовать плагин Slicebox, который использует 3D трансформации для смены слайдов в галерее. Основная идея заключается в создании 3D слоев, которые затем вращаются, открывая следующее изображение в качестве другой стороны объемного объекта.

 

В случае использования браузера, который не поддерживает 3D трансформации слайдер будет просто сдвигать изображения. Хотим обратить внимание , что 3D эффекты будут выводиться только в поддерживающих 3D трансформации CSS3 браузерах  (в настоящий момент — это Chrome и Safari).

Для начала нам необходимо подключить фреймворки и стили CSS, как уже  известно, их необходимо разместить между тегами head:

Затем создаем разметку для изображений, которая имеет следующий вид:

После этого вызываем сам плагин:

Теперь давайте рассмотрим некоторые опции плагина:

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