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

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

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

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

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

<div class="flip-3d">
<figure>
<img src="yacht.jpg" alt="">
<figcaption>Yacht</figcaption>
</figure>
</div>
<div class="flip-3d">
<figure>
<img src="bee.jpg" alt="">
<figcaption>Bee</figcaption>
</figure>
</div>
<div class="flip-3d">
<figure>
<img src="queenstown.jpg" alt="">
<figcaption>Queens-town</figcaption>
</figure>
</div>

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

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

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

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

Исходный CSS

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

div.flip-3d {
perspective: 1200px; width: 30%; float: left;
}

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

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

div.flip-3d figure {
position: relative;
transform-style: preserve-3d;
transition: 1s transform;
font-size: 1.6rem;
}
div.flip-3d figure img {
width: 100%; height: auto;
}

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

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

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

div.flip-3d figure figcaption {
position: absolute;
width: 100%; height: 100%; top: 0;
transform: rotateY(.5turn) translateZ(1px);
background: rgba(255,255,255,0.9);
text-align: center;
padding-top: 45%;
opacity: 0.6;
transition: 1s .5s opacity;
}

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

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

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

div.flip-3d:hover figure { transform: rotateY(.5turn); }
div.flip-3d:hover figure figcaption { opacity: 1; }

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

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

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

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

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

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

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

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

div.flip-3d figure:after {
content: " "; display: block;
height: 8vw; width: 100%;
transform: rotateX(90deg);
background-image: radial-gradient(ellipse closest-side, rgba(0, 0, 0, 0.05) 0%, rgba(0, 0, 0, 0) 100%);
}

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

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

Автор: Dudley Storey

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

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

Учебник по основам 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> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Я не робот.

Spam Protection by WP-SpamFree