Галерея 3D-зображень-перевертнів з динамічно змінюються тінями в CSS

28

Від автора: проблема користувальницького інтерфейсу, до якої ми тут звертаємося – та сама, на якій зосереджені багато моїх CSS 3D — роботи, такі як користувальницький інтерфейс Origami: ми живемо в світі дуже різноманітних екранів, причому стрімко стають нормою їх маленькі розміри. Це вимагає переоцінки наявного простору: замість розміщення підписів під фотографіями нам може знадобитися помістити їх за зображенням з тим, щоб ті з’являлися при діях дотику або проведення мишею.

Створення основної галереї

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

Галерея 3D-зображень-перевертнів з динамічно змінюються тінями в CSS
Yacht
Галерея 3D-зображень-перевертнів з динамічно змінюються тінями в CSS
Bee
Галерея 3D-зображень-перевертнів з динамічно змінюються тінями в CSS
Queens-town

Зверніть увагу на зовнішній div для кожного figure, який буде використаний при створенні 3D-контексту для вмісту галереї. Щоб отримати показаний в прикладі 3D-ефект, нам потрібно зробити три речі:

Змусити кожну підпис figcaption покривати ту область, яку займає описуване їм адаптивне зображення.

Перевернути цю підпис, помістивши її на іншій стороні зображення.

Створити тінь, яка стане переміщатися разом із зображенням, не додаючи при цьому додаткової розмітки.

Вихідний CSS

Спочатку головне: нам потрібно маніпулювати елементами зображення в тривимірному просторі. Домогтися цього можна, помістивши до звичайного батьківського елементу фігури властивість perspective:

div.flip-3d {
perspective: 1200 px; 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.6 rem;
}
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%);
}

Напевно, краще все побачити остаточний ефект на ілюстрації з іншого ракурсу:

Галерея 3D-зображень-перевертнів з динамічно змінюються тінями в CSS

От і все! Сподіваюся, це стане зерном натхнення для ваших власних рішень 3D CSS.