Галерея 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

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

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

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

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

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

Учебник по основам CSS для начинающих

Прямо сейчас изучи CSS с нуля!

Смотреть курс

Метки: ,

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

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

Комментарии Facebook:

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

  1. Lev

    Спасибо за статью. Попробовал реализовать на сайте клиента. Пока делал проверял в мозиле. Но когда закончил решил посмотреть в хроме. И увы, но там результат оказался не рабочим. Вот скрины того, что там получилось: скрин до ховера, после ховера. И нету эффекта перевертыша. Просто плавно затемняется фон. Не подскажите в чем может быть дело?

    • Андрей Кудлай

      Попробуйте добавить вендорные префиксы и должно все заработать в Хроме. Для этого продублируйте все свойства transform (также и где есть значение transform) и замените в этих дублях вхождения строки transform на -webkit-transform

      • Lev

        Спасибо за ответ! Не много ситуация улучшилась. Вот что получилось: скрин. То есть задний фон с текстом уже не просвечивается. Но на ховер в хроме реакции никакой так и нету. Вот скрин моего CSS

        • Андрей Кудлай

          Я говорил: замените в этих дублях вхождения строки transform на -webkit-transform… а на скрине я вижу -webkit-transition: 1s transform; … где здесь произошла замена? Не совсем там, где я говорил… должно быть transition: 1s -webkit-transform;
          Попробуйте. Если не получится все же, тогда давайте перенесем общение на наш форум, где можно выложить код (а не скрин кода), дать ссылку на сайт, в общем, где удобнее решать проблемы с кодом.

          • Lev

            Все спасибо! Разобрался. Но ховере не добавил префикс. Теперь все хорошо работает! :)

          • Андрей Кудлай

            Отлично! :)

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">

Я не робот.

Spam Protection by WP-SpamFree