Jak korzystać z perspektywy z opcjami transformacji do projektowania ścian ze zdjęciami 3D w Divi

Projektowanie fototapety 3D wydaje się być możliwe tylko przy użyciu edytora zdjęć, takiego jak Photoshop lub Sketch. Ale nie jest! W dzisiejszych czasach istnieje mnóstwo pozornie niemożliwych projektów, które można zbudować w Internecie za pomocą CSS. A dzięki kreatorowi stron, takim jak Divi, nie musisz nawet dużo wiedzieć o CSS, aby tworzyć tego rodzaju projekty. Dlatego dzisiaj pokażę Wam jak zaprojektować fototapety 3D w Divi.

Sztuczka polega na użyciu właściwości CSS Perspektywa. Po dodaniu tylko jednej linii CSS do elementu nadrzędnego, możesz użyć wbudowanych opcji transformacji Divi, aby obrócić elementy w realistyczne projekty 3D.

Zacznijmy!

zapowiedź

Oto rzut oka na ściany 3D Photo, które będziemy dzisiaj projektować.

Pobierz przykładowe projekty 3D Photo Wall Układ za DARMO

Aby położyć swoje ręce na projektach ścian ze zdjęć 3D z tego samouczka, najpierw musisz je pobrać za pomocą przycisku poniżej. Aby uzyskać dostęp do pobrania, musisz zapisać się na naszą listę e-mailową Divi Daily, korzystając z poniższego formularza. Jako nowy subskrybent otrzymasz jeszcze więcej dobroci Divi i darmowy pakiet Divi Layout w każdy poniedziałek! Jeśli jesteś już na liście, po prostu wpisz poniżej swój adres e-mail i kliknij pobierz. Nie będziesz „ponownie subskrybować” ani otrzymywać dodatkowych wiadomości e-mail.

Pobierz pliki

Pobierz za darmo

Dołącz do biuletynu Divi, a wyślemy Ci e-mailem kopię najlepszego pakietu układu strony docelowej Divi, a także mnóstwo innych niesamowitych i bezpłatnych zasobów, wskazówek i sztuczek Divi. Idź dalej, a w mgnieniu oka zostaniesz mistrzem Divi. Jeśli masz już subskrypcję, wpisz poniżej swój adres e-mail i kliknij Pobierz, aby uzyskać dostęp do pakietu układów.

POBIERANIE

Udało Ci się zasubskrybować. Sprawdź swój adres e-mail, aby potwierdzić subskrypcję i uzyskać dostęp do bezpłatnych cotygodniowych pakietów układów Divi!

Aby zaimportować układ na swoją stronę, po prostu wyodrębnij plik zip i przeciągnij plik json do Divi Builder.

Przejdźmy do samouczka, dobrze?

Subskrybuj nasz kanał YouTube

Pierwsze kroki

Aby rozpocząć korzystanie z tego samouczka, potrzebujesz tylko zainstalowanego i aktywnego motywu Divi. Będziesz potrzebować kilku obrazów, więc możesz użyć tych samych obrazów, których używam z pakietu układu biura podróży. Następnie musisz utworzyć nową stronę, podać stronę i tytuł oraz wdrożyć Divi Builder, aby zbudować na interfejsie. Następnie wybierz opcję „buduj od podstaw”. Otóż ​​to. Twoje płótno projektowe czeka!

Zrozumienie, jak perspektywa działa z opcjami przekształcenia

Jeśli kiedykolwiek brałeś udział w podstawowych zajęciach plastycznych, prawdopodobnie znasz perspektywę. Jest to technika używana przez artystów do rysowania obiektów, które wydają się być trójwymiarowe, mimo że istnieją na dwuwymiarowej kartce papieru lub płótnie. W projektowaniu stron internetowych można umieszczać elementy w pozycjach 3D za pomocą właściwości transform. W Divi te opcje transformacji są wbudowane w konstruktora Divi. Główną właściwością transform, która umieszcza element w pozycji 3D, jest transform rotate, która umożliwia obracanie elementów wzdłuż osi z, x lub y. Jednak jeśli obrócisz element za pomocą transform rotate, element nie pojawi się jako 3D, chyba że zostanie zastosowana właściwość Perspektywa.

Załóżmy na przykład, że masz pojedynczy moduł obrazu z obrazem dodanym do jednego wiersza kolumny.

Następnie użyj właściwości transform rotate, aby obrócić obraz wzdłuż osi x. Obraz zostanie obrócony, ale pozostanie dwuwymiarowy, więc obraz po prostu wygląda, jakby był ściśnięty od góry i dołu, aby stał się krótszy.

Teraz, jeśli dodasz perspektywę za pomocą małego fragmentu CSS do głównego elementu wiersza (który jest elementem nadrzędnym obrazu), dodajesz perspektywę do obrazu. W zależności od wartości perspektywy, możesz zwiększyć lub zmniejszyć odległość, z jakiej obiekt pojawia się od użytkownika patrzącego na ekran. Oto przykład tego, jak będzie wyglądał obraz, jeśli dodasz „perspektywa: 600px” do wiersza.

Widać, że górna część obrazu jest mniejsza, a dół obrazu jest większy, tworząc perspektywiczny efekt 3D. Zasadniczo obraz wygląda 900px od użytkownika przeglądającego stronę.

W tym samouczku użyję tej samej techniki, aby obrócić cały rząd obrazów, a następnie dodać perspektywę do sekcji nadrzędnej, aby utworzyć ściany ze zdjęć 3D.

Projektowanie górnych i dolnych ścian fotograficznych 3D

W tym pierwszym projekcie dodamy ścianę 3D na górze i na dole pojedynczego tekstu, który może być użyty jako nagłówek. Oto jak to zrobić.

Tworzenie górnej ściany zdjęć 3D

Aby rozpocząć pracę na nowej stronie, utwórz zwykłą sekcję z czterokolumnowym wierszem.

W kolumnie 1 dodaj moduł obrazu z pierwszym obrazem. Wszystkie obrazy, których używam w tym przykładzie, mają wymiary 600 na 800 pikseli.

Po przesłaniu obrazu do modułu obrazu zaktualizuj dopełnienie w następujący sposób:

Niestandardowe wypełnienie: 3% u góry, 3% u dołu, 3% w lewo, 3% w prawo

Zduplikuj (lub skopiuj i wklej) obraz i dodaj je do każdej z czterech kolumn, tak aby w każdej z czterech kolumn były po trzy obrazy.

Będzie to górna ściana (lub sufit), którą obrócimy i dodamy perspektywę, aby stworzyć projekt ściany 3D.

Dostosuj sekcję, aby dodać perspektywę i ukryć przepełnienie

Ponieważ zamierzamy obracać moduł wiersza (a nie pojedyncze obrazy), musimy dodać właściwość Perspektywa do rodzica wiersza, którym jest sekcja. Aby obrazy nie wychodziły poza kontener sekcji, musimy dodać przepełnienie ukryte zarówno do przepełnienia pionowego, jak i poziomego.

Aby to zrobić, otwórz ustawienia sekcji i zaktualizuj następujące elementy:

Kolor tła: #000000
Niestandardowe wypełnienie: 0px na górze, 0px na dole

Aby dodać właściwość perspective, dodaj następujący niestandardowy CSS do głównego elementu:

Główny element CSS:

perspective: 400px;

Zobacz właściwości przepełnienia w następujący sposób:

Przepełnienie poziome: ukryte
Przepełnienie pionowe: ukryte

Aktualizuj ustawienia wiersza: szerokość i szerokość rynny

Teraz nadszedł czas, aby dostosować wiersz, aby przygotować go do obróconego projektu 3D. Aby to zrobić, zmniejszymy szerokość i usuniemy wszelkie marginesy między obrazami, aktualizując szerokość rynny.

Otwórz ustawienia wiersza i zaktualizuj następujące elementy:

Szerokość rynny: 1
Szerokość: 300px (komputer, tablet i telefon)

Aktualizuj ustawienia wiersza: Przekształć obrót i początek

Teraz użyj opcji transformuj obrót, aby obrócić wiersz w następujący sposób:

Przekształć Obróć oś Y: -58 stopni

Zmień źródło transformacji w następujący sposób:

Transform Origin: dolny środek (lub 100% 50%)

Aktualizuj ustawienia wiersza: niestandardowe szerokości kolumn

Ponieważ chcemy, aby czterokolumnowy układ pozostał na wyświetlaczach tabletów i telefonów, musimy zastąpić CSS dla szerokości kolumn w tych punktach przerwania. Aby to zrobić, musimy dodać właściwość width css do każdej z kolumn. Na karcie Zaawansowane dodaj następujący niestandardowy fragment kodu CSS do głównego elementu każdej kolumny w następujący sposób:

(uwaga: upewnij się, że szerokość rynny jest ustawiona na 1 lub to nie zadziała)

Kolumna 1 Główny element:

width: 25% !important;

Kolumna 2 Główny element:

width: 25% !important;

Kolumna 3 Główny element:

width: 25% !important;

Kolumna 4 Główny element:

width: 25% !important;

Otóż ​​to. Powstała nasza pierwsza fototapeta 3d.

Utwórz sekcję nagłówka

Aby utworzyć nasz nagłówek do projektu, musimy utworzyć nową zwykłą sekcję z jednokolumnowym wierszem bezpośrednio pod bieżącą sekcją.

Przed dodaniem modułu zaktualizuj sekcję za pomocą czarnego tła:

Kolor tła: #000000

Następnie dodaj tę samą właściwość Perspektywa do głównego elementu sekcji, jak to zrobiliśmy wcześniej, w następujący sposób:

Następnie dodaj moduł tekstowy do wiersza z następującymi elementami:

Treść: Fotografia

Czcionka tekstu: Titillium Web
Styl czcionki tekstu: TT
Kolor tekstu: #ffffff
Rozmiar tekstu: 5vw
Odstępy między literami tekstu: 6px
Wysokość linii tekstu: 1em
Orientacja tekstu: Środek

Teraz możemy dodać obrót transformacji do modułu tekstowego. Z perspektywą ustawioną na rodzicu (lub sekcji) efekt 3D pojawi się po obróceniu tekstu.

Dodaj wartości obrotu transformacji w następujący sposób:

Przekształć Obróć oś X: -12 stopni
Przekształć Obróć oś Y: 32deg

Teraz jesteśmy gotowi do stworzenia dolnej ściany 3D.

Utwórz dolną ścianę 3D Photo (lub podłogę)

Aby utworzyć dolną ścianę 3D, możemy po prostu skopiować i wkleić górną sekcję zawierającą górną ścianę i wkleić ją bezpośrednio pod sekcją nagłówka.

Następnie zaktualizuj ustawienia wiersza nowej sekcji w następujący sposób:

Przekształć Obróć oś Y: 58 stopni

Przekształć pochodzenie: górny środek

Ostateczny projekt

Otóż ​​to! Sprawdźmy ostateczny projekt.

Projekt pozostanie również nienaruszony na urządzeniach mobilnych (poza niewielkim przepełnieniem).

Tworzenie lewych i prawych ścian zdjęć 3D

W tym następnym projekcie stworzymy ściany ze zdjęć 3D po lewej i prawej stronie nagłówka zamiast na górze i na dole. Aby przyspieszyć proces projektowania, w pierwszym przykładzie użyjemy niektórych z naszych gotowych projektów.

Zacznijmy od powielenia dolnej części pierwszego przykładu projektu zawierającego dolną ścianę obrazu. Następnie otwórz ustawienia wiersza nowej sekcji i zresetuj opcje transformacji do stanu domyślnego.

Następnie zduplikuj wiersz.

Następnie skopiuj wiersz (nie sekcję) zawierający moduł tekstowy z nagłówkiem w pierwszym przykładzie projektu. Następnie wklej go między dwa wiersze zawierające obrazy.

Jest to podobna konfiguracja do pierwszego projektu, z wyjątkiem tego, że wszystkie nasze rzędy znajdują się w jednej sekcji. Jest to ważne dla następnego kroku.

Chcemy, aby nasze dwie ściany graficzne znajdowały się po lewej i prawej stronie strony z tekstem pośrodku. Prostym sposobem na to jest użycie flexu wyświetlania w naszej sekcji. Spowoduje to wyrównanie naszych wierszy poziomo w obrębie sekcji.

Aby to zrobić, otwórz ustawienia sekcji i dodaj następujący niestandardowy kod CSS do elementu głównego:

(Zauważ, że zwiększamy wartość perspektywy do 700px, aby uzyskać większą odległość „przestrzeni Z” perspektywy użytkownika.)

Główny element CSS:

perspective: 700px;
display:flex;

I voila! Nasze ściany są na miejscu i gotowe do obrotu.

Dodaj więcej obrazów dla wyższej ściany

Aby nasza fototapeta 3D była nieco wyższa, wystarczy dodać kolejny obraz do każdej z naszych czterech kolumn w każdym z wierszy zawierających obrazy. Tylko upewnij się, że przenoszą 3% wyściółki, tak jak inni.

Zmiana szerokości dwóch bocznych rzędów

Zanim obrócimy naszą ścianę obrazu, najpierw musimy dostosować ich szerokość do 100%. Otwórz ustawienia wiersza dla ściany obrazu po lewej stronie i zaktualizuj następujące elementy:

Szerokość: 100% (komputer, tablet, telefon)
Maksymalna szerokość: 100%

Następnie zrób to samo dla rzędu po prawej stronie.

Obracanie bocznych rzędów w celu uzyskania efektu 3D

Teraz jesteśmy gotowi dodać nasz obrót transformacji do każdego z naszych wierszy. Najpierw otwórz ustawienia wiersza dla lewego wiersza i zaktualizuj następujące elementy:

Przekształć Obróć oś X: 90deg

Następnie otwórz ustawienia wiersza dla wiersza po prawej stronie i zaktualizuj następujące elementy:

Przekształć Obróć oś X: -90deg

Mając naszą perspektywę na poziomie przekroju, nasze wiersze będą wyświetlane jako ściany ze zdjęciami 3D po każdej stronie naszego modułu tekstowego.

Ostateczny wynik

Sprawdźmy efekt końcowy.

Aby dodać odrobinę lukru na torcie, możesz dodać obraz tła z elementami graficznymi 3D. Oto przykład projektu z obrazem tła zaczerpniętym z pakietu Cryptocurrency Layout Pack.

Dodatkowy efekt zawisu: Obróć te ściany w View on Hover!

Możesz łatwo dodać efekt przekształcenia i obrócenia najechania, który pozwoli użytkownikowi oglądać ścianę obrazu, obracając ją w widoku po najechaniu. Aby to zrobić, otwórz ustawienia lewego wiersza i zaktualizuj następujące elementy:

Pochodzenie transformacji: lewy środek
Przekształć Obróć oś X (najechanie): 0deg

Następnie w ustawieniach odpowiedniego wiersza zaktualizuj następujące elementy:

Transform Origin: prawy środek
Przekształć Obróć oś X (najechanie): 0deg

Teraz sprawdź wynik.

Dodatkowy efekt projektowy: Spraw, aby obrazy oderwały się w kosmos

Ponieważ rząd obrazów jest obracany z ustawioną perspektywą, możesz przesuwać obrazy w swoim rzędzie za pomocą translacji transformacji. Fajne w tym jest to, że ruch będzie się odbywał wzdłuż płaszczyzny 3D. Aby to zrobić, po prostu otwórz ustawienia obrazu i użyj opcji tłumaczenia przekształcania, aby przenieść obraz poza siatkę w przestrzeń!

Oto przykład tego, jak by to wyglądało, dodając kilka wartości translacji transformacji do obrazów.

Końcowe przemyślenia

Tworzenie 3D Photo Walls w Divi naprawdę ma imponujący wpływ na projekt strony. I muszę powiedzieć, że eksperymentowanie z różnymi projektami przy użyciu technik opisanych w tym artykule jest naprawdę zabawne. Właściwość perspektywy współpracuje z opcjami transformacji, aby tworzyć niezliczone życie, takie jak projekty 3D! I nie zapominaj, że te rzędy (lub ściany) można wypełnić dowolnym modułem w Divi. Zachęcamy więc do wypróbowania kilku notek. Mam nadzieję, że zainspiruje Cię to dzisiaj do stworzenia czegoś wyjątkowego.

Czekam na kontakt z Państwem w komentarzach.

Pozdrawiam!