3D эффект сетки изображений для сайта  RUDEBOXСегодня мы хотели бы поделиться небольшой концепцией анимации сетки для изображений. Мы воссоздадим эффект который мы увидели в фантастическом приложении прототипа дизайна от Маркусом Эккерт . Идея состоит в том, чтобы повернуть элемент сетки в 3D, и открыть его в полноэкранном режиме при этом развернув некоторый контент. Для нашей демонстрации мы создали два демо. В первом из них мы вращаем элемент сетки по вертикали, а во втором по горизонтали. Обратите внимание, что это всего лишь концепт.

 

Много различным бесплатных шаблонов вы можете найти на сайте наших партнеров, также имеются и премиум шаблоны с круглосуточной техподдержкой и помощью в настройке:

Мы используем несколько CSS свойств, которые могут не работать в любом браузере (3D-преобразования, CSS Transitions). Это экспериментальная работа и для браузеров, не поддерживающих ни одну из этих свойств, мы предоставили простой, запасной, вариант, который просто показывает и скрывает содержание. И так, давайте приступим.

Шаг 1. HTML

У нас есть главный section элемент, который содержит разделение для сетки и один для содержания:

Когда мы нажимаем на элементы сетки, мы вызываем функцию родового контента. Разделение контента также содержит два пролета, один для индикатора активности, и один для крестика закрытия.
С разметкой мы разобрались, теперь давайте перейдем к стилям.
3D эффект сетки изображений для сайта | RUDEBOX

Шаг 2. CSS

Сетка-обертывание оболочки будет иметь следующий вид:

Сетка будет иметь переход, и мы должны назначить preserve-3d преобразования-стиль к нему, потому что мы хотим иметь возможность вращение сетки в 3D:
Когда мы нажимаем на элемент сетки, мы добавляем класс полного развертывания к сетке:
Когда мы нажимаем на элемент сетки, у нас происходит эффект постепенного исчезновения:

Передняя и задняя сторона заполнителя обвертки следовать классическому 3D:

В зависимости от того, какой вид вращения мы хотим увидеть, нам необходимо установить в соответствии класс к главной обвертке и установить следующие преобразования:

Для фиктивного содержания мы определим некоторые переходы для непрозрачности и преобразования. В зависимости от поворота мы установили начальную произвольную фактичных элементов на оси Y или оси Х. Потом, когда мы добавляем класс «шоу», чтобы анимировать переворот на 0.

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

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