3D галерея при помощи CSS3 и jQuery

Сегодня мы хотим поделиться с вами экспериментальной 3D-галереей, которая использует CSS 3D transforms.

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

Обратите внимание, что это будет работать только в браузерах, которые поддерживают CSS 3D-преобразования.

Как это работает

Следующая HTML-разметка используется для этой галереи:

<section id="dg-container" class="dg-container">
    <div class="dg-wrapper">
        <a href="#">
            <img src="images/1.jpg" alt="image01">
            <div>http://www.colazionedamichy.it/</div>
        </a>
        <a href="#">
            <!-- ... -->
        </a>
        <!-- ... -->
    </div>
    <nav>
        <span class="dg-prev"><</span>
        <span class="dg-next">></span>
    </nav>
</section>

А это инициализация галереи:

$('#dg-container').gallery();

Параметры:

Доступны следующие варианты:

current : 0,
//индекс текущего элемента
 
autoplay : false,
// slideshow вкл / выкл
 
interval : 2000
// время между переходами

Я надеюсь, что вам понравился этот пример!

Используйте кнопки навигации внизу страницы для перехода между элементами галереи

Перевод статьи с tympanus.net/codrops