Галерея 3D-изображений-перевертышей с динамически меняющимися тенями в CSS

От автора: проблема пользовательского интерфейса, к которой мы здесь обращаемся – та же, на которой сосредоточены многие мои CSS 3D— работы, такие как пользовательский интерфейс Origami: мы живем в мире очень разнообразных экранов, причем стремительно становятся нормой их маленькие размеры. Это требует переоценки имеющегося пространства: вместо размещения подписей под фотографиями нам может понадобиться поместить их за изображением с тем, чтобы те появлялись при действиях касания или проведения мышью.

Создание основной галереи

Разметка галереи переворачивающихся изображений очень проста:

Обратите внимание на внешний div для каждого figure, который будет использован при создании 3D-контекста для содержимого галереи. Чтобы получить показанный в примере 3D-эффект, нам требуется сделать три вещи:

Исходный CSS

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

(Заметьте, что код CSS показан без вендорных префиксов для того, чтобы сэкономить место и сохранить ясность изложения).

Далее разместите масштабируемые элементы фигуры друг около друга с помощью float и сделайте изображения в них адаптивными. Чтобы переход transition элементов figure оставался как можно более результативным, мы заранее определяем, что станем отслеживать только преобразование элемента. Также добавляем часто забываемое свойство transform-style, которое нам пригодится попозже.

(Я добавил в код запрос @media, чтобы упростить галерею на более маленьких экранах и при сужении окна браузера, что здесь не показано).

Размещение подписей

Подписи размещены в точности поверх изображений путем применения position: absolute (что возможно только потому, что у элементов figure относительное расположение position: relative). Использование полуоборота (т.е. вращения на 180°) и крошечного значения translate помещает подписи «за» изображениями, пока свойство transform-style корректно применяется к элементу figure. (Вам, возможно, захочется взглянуть на то, что происходит при удалении этого свойства).

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

Установка вращения

Когда галерея определена, создать анимацию уже совсем просто:

Почему просто не установить :hover к элементам figure?

Оборачивание каждого элемента figure в div кажется немного чрезмерным: почему просто не исключить внешние элементы и установить состояние проведения мышью :hover прямиком к элементам figure?
Причина в том, что figure физически поворачиваются во время перехода, ребром проходя относительно окна браузера по дуге. Поддержание состояния проведения мышью hover к элементу figure сужает активную область во время этого вращения: сбивая браузер с толку по поводу того, находится ли мышь внутри или вне элемента, что в результате приводит к тому, что переходы «дергаются» туда-сюда.

Добавление теней

Я увлекся идеей добавить тени под изображениями, но эта задача осложнялась тремя проблемными вопросами:

Решение, к которому я в итоге пришел, состояло в применении сгенерированного контента, заполненного радиальным градиентом, создающим впечатление тени, «привязанной» к своему изначальному элементу:

Наверное, лучше всего увидеть окончательный эффект на иллюстрации с другого ракурса:

Вот и все! Надеюсь, это послужит зерном вдохновения для ваших собственных решений CSS 3D.

Автор: Dudley Storey

Источник: //demosthenes.info/

Редакция: Команда webformyself.

Комментарии Вконтакте:

Комментарии (6)