Webmasters.BY

При помощи 3D transforms мы можем делать простые элементы более интересным, разместив их в трехмерном пространстве. В сочетании с CSS transitions, эти элементы, размещенные в 3D-пространстве, создают очень реалистичный эффект. Сегодня мы хотим поделиться с вами экспериментальной 3D-галереей , которая использует CSS 3D transforms.

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

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

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

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

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

Параметры:

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

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

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

Демонстрация

Скачать исходный файлы

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