Как использовать перспективу с опциями преобразования для создания 3D-фото стен в Divi

Создание 3D-фотостены кажется чем-то возможным только с помощью фоторедактора, такого как Photoshop или Sketch. Но это не так! В наши дни существует множество, казалось бы, невозможных дизайнов, которые вы можете создать в Интернете, используя только CSS. А с таким конструктором страниц, как Divi, вам даже не нужно много знать о CSS для создания такого рода дизайнов. Вот почему сегодня я собираюсь показать вам, как создавать 3D-фотостены в Divi.

Уловка состоит в том, чтобы использовать свойство перспективы css. С помощью всего лишь одной строки CSS, добавленной к родительскому элементу, вы можете использовать встроенные параметры преобразования Divi для поворота элементов в реалистичные трехмерные конструкции.

Давайте начнем!

Sneak Peek

Вот краткий обзор стен 3D Photo, которые мы будем проектировать сегодня.

Скачайте БЕСПЛАТНО образцы дизайна 3D-фотостен Layout

Чтобы получить доступ к 3D-фото стенам из этого урока, вам сначала нужно загрузить его, нажав кнопку ниже. Чтобы получить доступ к загрузке, вам необходимо подписаться на наш список рассылки Divi Daily, используя форму ниже. Как новый подписчик, вы будете получать еще больше добра Divi и бесплатный пакет Divi Layout каждый понедельник! Если вы уже есть в списке, просто введите ниже свой адрес электронной почты и нажмите «Загрузить». Вы не будете «повторно подписаны» или будете получать дополнительные электронные письма.

Скачать файлы

Скачать бесплатно

Подпишитесь на рассылку новостей Divi, и мы отправим вам по электронной почте копию окончательного пакета макетов целевой страницы Divi, а также множество других удивительных и бесплатных ресурсов, советов и приемов Divi. Следуйте за ним, и вы станете мастером Divi в кратчайшие сроки. Если вы уже подписаны, просто введите свой адрес электронной почты ниже и нажмите «Загрузить», чтобы получить доступ к пакету макетов.

СКАЧАТЬ

Вы успешно подписались. Пожалуйста, проверьте свой адрес электронной почты, чтобы подтвердить подписку и получить доступ к бесплатным еженедельным пакетам макетов Divi!

Чтобы импортировать макет на свою страницу, просто извлеките zip-файл и перетащите файл json в Divi Builder.

Давайте перейдем к руководству, ладно?

Подпишитесь на наш канал Youtube

Начиная

Чтобы начать работу с этим руководством, все, что вам нужно, это установленная и активная тема Divi. Вам понадобится несколько изображений для работы, поэтому не стесняйтесь использовать те же изображения, что и я, из пакета макетов туристического агентства. После этого вам нужно будет создать новую страницу, указать страницу и заголовок, а также развернуть Divi Builder для создания интерфейса. Затем выберите вариант «построить с нуля». Вот и все. Ваш дизайнерский холст ждет!

Понимание того, как работает перспектива с параметрами преобразования

Если вы когда-либо посещали уроки базового искусства, вы, вероятно, знакомы с перспективой. Это техника, используемая художниками для рисования объектов, которые кажутся трехмерными, даже если они существуют на двухмерном листе бумаги или холсте. В веб-дизайне вы можете позиционировать элементы в 3D-позициях с помощью свойства transform. В Divi эти параметры преобразования встроены в конструктор Divi. Основное свойство преобразования, которое помещает элемент в трехмерное положение, - это преобразование поворота, которое позволяет вам вращать элементы по оси z, x или y. Однако, если вы поворачиваете элемент с помощью преобразования поворота, элемент не будет отображаться как трехмерный, если не будет применено свойство перспективы.

Например, предположим, что у вас есть один модуль изображения с изображением, добавленным в строку из одного столбца.

Затем вы используете свойство transform rotate, чтобы повернуть изображение по оси x. Изображение будет вращаться, но останется двухмерным, поэтому изображение будет выглядеть так, как будто оно было сжато сверху и снизу, чтобы стать короче.

Теперь, если вы добавите перспективу с помощью небольшого фрагмента CSS к основному элементу строки (который является родительским элементом изображения), вы добавите перспективу к изображению. В зависимости от значения перспективы вы можете увеличить или уменьшить расстояние до объекта от пользователя, смотрящего на экран. Вот пример того, как будет выглядеть изображение, если вы добавите в строку «перспективу: 600 пикселей».

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

В этом уроке я буду использовать ту же технику, чтобы повернуть весь ряд изображений, а затем добавить перспективу в родительский раздел для создания 3D-фотостен.

Проектирование верхней и нижней 3D фотостен

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

Создание верхней 3D-фотостены

Чтобы начать работу на новой странице, создайте обычный раздел со строкой из четырех столбцов.

В столбце 1 добавьте модуль изображения с вашим первым изображением. Все изображения, которые я использую в этом примере, имеют размер 600 на 800 пикселей.

После загрузки изображения в модуль изображения обновите отступы следующим образом:

Пользовательские отступы: 3% сверху, 3% снизу, 3% слева, 3% справа

Дублируйте (или скопируйте и вставьте) изображение и добавьте их в каждый из четырех столбцов, чтобы у вас было по три изображения в каждом из четырех столбцов, подобных этому.

Это будет верхняя стена (или потолок), которую мы будем вращать и добавлять перспективу для создания трехмерного дизайна стены.

Настройте раздел, чтобы добавить перспективу и скрыть переполнение

Поскольку мы собираемся вращать модуль строки (а не отдельные изображения), нам нужно добавить свойство перспективы к родительскому элементу строки, который является разделом. И чтобы изображения не выходили за пределы контейнера раздела, мы должны добавить скрытое переполнение как для вертикального, так и для горизонтального переполнения.

Для этого откройте настройку раздела и обновите следующее:

Цвет фона: # 000000
Пользовательский отступ: 0 пикселей сверху, 0 пикселей снизу.

Чтобы добавить свойство перспективы, добавьте следующий настраиваемый CSS к основному элементу:

Основной элемент CSS:

perspective: 400px;

См. Следующие свойства переполнения:

Горизонтальное переполнение: скрыто
Вертикальное переполнение: скрыто

Обновить настройки строки: ширина и ширина желоба

Теперь пришло время настроить строку, чтобы подготовить ее для повернутого 3D-дизайна. Для этого мы собираемся уменьшить ширину и избавиться от любых полей между изображениями, обновив ширину желоба.

Откройте настройки строки и обновите следующее:

Ширина желоба: 1
Ширина: 300 пикселей (компьютер, планшет и телефон)

Обновить настройки строки: преобразовать поворот и исходную точку

Теперь используйте опцию преобразования поворота, чтобы повернуть строку следующим образом:

Трансформировать поворот оси Y: -58deg

Измените источник преобразования следующим образом:

Transform Origin: нижний центр (или 100% 50%)

Обновить настройки строки: настраиваемая ширина столбцов

Поскольку мы хотим, чтобы макет с четырьмя столбцами оставался на дисплеях планшетов и телефонов, нам необходимо переопределить CSS для ширины столбца в этих точках останова. Для этого нам нужно добавить свойство ширины css в каждый из столбцов. На вкладке «Дополнительно» добавьте следующий настраиваемый фрагмент CSS к основному элементу каждого столбца следующим образом:

(примечание: убедитесь, что ширина желоба установлена ​​на 1, иначе это не сработает)

Столбец 1 Основной элемент:

width: 25% !important;

Столбец 2 Основной элемент:

width: 25% !important;

Столбец 3 Основной элемент:

width: 25% !important;

Столбец 4 Основной элемент:

width: 25% !important;

Вот и все. Создана наша первая 3d фото стена.

Создайте раздел заголовка

Чтобы создать заголовок для дизайна, нам нужно создать новый обычный раздел со строкой из одного столбца непосредственно под текущим разделом.

Перед добавлением модуля обновите раздел с черным фоном:

Цвет фона: # 000000

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

Затем добавьте текстовый модуль в строку со следующим:

Содержание: Фотография

Шрифт текста: Titillium Web
Стиль шрифта текста: TT
Цвет текста текста: #ffffff
Размер текста текста: 5vw
Расстояние между буквами текста: 6 пикселей
Высота текстовой строки: 1em
Ориентация текста: по центру

Теперь мы можем добавить поворот преобразования к текстовому модулю. С перспективой, установленной в родительском элементе (или разделе), трехмерный эффект возникнет, когда мы повернем текст.

Добавьте значения поворота преобразования следующим образом:

Преобразование, поворот оси X: -12 градусов
Преобразование, поворот оси Y: 32 градуса

Теперь мы готовы создать нижнюю 3D фотостену.

Создайте нижнюю 3D-фотостену (или пол)

Чтобы создать нижнюю 3D-фотостену, мы можем просто скопировать и вставить верхнюю часть, содержащую верхнюю стену, и вставить ее прямо под раздел заголовка.

Затем обновите настройки строки нового раздела следующим образом:

Трансформировать поворот оси Y: 58deg

Преобразовать исходную точку: центр вверху

Окончательный дизайн

Вот и все! Давайте посмотрим на окончательный дизайн.

Дизайн также останется нетронутым и на мобильных устройствах (за исключением небольшого переполнения).

Создание левой и правой 3D фотостен

Для этого следующего дизайна мы собираемся создать 3D-фотостены слева и справа от заголовка, а не сверху и снизу. Чтобы ускорить процесс проектирования, мы будем использовать некоторые из наших готовых проектов в нашем первом примере.

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

Затем продублируйте строку.

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

Это похоже на первый дизайн, за исключением того, что все наши строки находятся внутри одной секции. Это важно для следующего шага.

Мы хотим, чтобы две наши стены изображений располагались слева и справа от страницы с текстом в центре. Легкий способ сделать это - использовать гибкое отображение в нашем разделе. Это выровняет наши строки по горизонтали внутри раздела.

Для этого откройте настройки раздела и добавьте следующий настраиваемый CSS в основной элемент:

(Обратите внимание, что мы увеличиваем значение перспективы до 700 пикселей, чтобы создать большее расстояние «Z space» для перспективы пользователя.)

Основной элемент CSS:

perspective: 700px;
display:flex;

И вуаля! Наши стены на месте и готовы к вращению.

Добавить больше изображений для более высокой стены

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

Изменение ширины двух боковых рядов

Прежде чем мы повернем нашу стену с изображениями, сначала нам нужно настроить ее ширину на 100%. Откройте настройки строки для стены изображений с левой стороны и обновите следующее:

Ширина: 100% (десктоп, планшет, телефон)
Макс ширина: 100%

Затем сделайте то же самое для ряда с правой стороны.

Поворот боковых рядов для получения 3D-эффекта

Теперь мы готовы добавить вращение преобразования к каждой из наших строк. Сначала откройте настройки строки для левой строки и обновите следующее:

Преобразование, поворот оси X: 90 градусов

Затем откройте настройки строки для строки справа и обновите следующее:

Преобразование, поворот оси X: -90 градусов

Когда наша перспектива установлена ​​на уровне раздела, наши строки будут отображаться как 3D-фотостены с каждой стороны нашего текстового модуля.

Конечный результат

Посмотрим на окончательный результат.

Чтобы добавить немного глазури на торт, вы можете добавить фоновое изображение с трехмерными графическими элементами. Вот пример дизайна с фоновым изображением, взятым из пакета макетов криптовалюты.

Дополнительный эффект при наведении: поверните эти стены в поле зрения при наведении!

Вы можете легко добавить эффект поворота при наведении, который позволит пользователю просматривать стену изображения, поворачивая ее в поле зрения при наведении. Для этого откройте настройки левой строки и обновите следующее:

Преобразовать исходную точку: левый центр
Преобразовать, повернуть ось X (при наведении): 0 градусов

Затем в настройках правой строки обновите следующее:

Transform Origin: справа в центре
Преобразовать, повернуть ось X (при наведении): 0 градусов

А теперь посмотрите на результат.

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

Поскольку ряд изображений вращается с сохранением перспективы на месте, вы можете перемещать изображения в пределах своей строки, используя команду transform translate. Что в этом круто, так это то, что движение будет оставаться в трехмерной плоскости. Для этого просто откройте настройки изображения и используйте опцию трансформации, чтобы переместить изображение за пределы сетки в пространство!

Вот пример того, как это будет выглядеть, если добавить к изображениям несколько значений transform translate.

Последние мысли

Создание 3D-фотостен в Divi действительно оказывает впечатляющее влияние на дизайн страницы. И я должен сказать, что экспериментировать с разными дизайнами, используя методы, описанные в этой статье, действительно весело. Свойство перспективы работает рука об руку с опциями трансформации, чтобы создавать бесчисленные жизни, подобные 3D-дизайнам! И не забывайте, что эти ряды (или стены) можно заполнить любым модулем в Divi. Так что не стесняйтесь попробовать и некоторые аннотации. Надеюсь, это вдохновит вас на создание чего-то уникального сегодня.

Я с нетерпением жду вашего ответа в комментариях.

Ваше здоровье!