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

Галерея 3D-изображений-перевертышей

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

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

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

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

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Узнать подробнее

Заставить каждую подпись figcaption покрывать ту же область, которую занимает описываемое им адаптивное изображение.

Перевернуть эту подпись, поместив ее на другой стороне изображения.

Создать отбрасываемую тень, которая станет перемещаться вместе с изображением, не добавляя при этом дополнительной разметки.

Исходный CSS

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

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

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

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

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

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

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Узнать подробнее

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

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

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

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

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

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

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

Тени нужно создать, не добавляя дополнительной разметки;

Они должны быть широкими и тонкими: другими словами, не по настоящему размеру или силуэту изображения – box-shadow и drop-shadow исключаются.

Тени должны вращаться в собственной плоскости, при этом перемещаясь вместе с изображением.

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

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

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

Автор: Dudley Storey

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

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

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Узнать подробнее

Верстка. Быстрый старт

Практический курс по верстке адаптивного сайта с нуля!

Смотреть

Метки: ,

Похожие статьи:

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

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