Cum se utilizează perspectiva cu opțiuni de transformare pentru a proiecta pereți foto 3D în Divi

Proiectarea unui perete foto 3D pare ceva posibil doar folosind un editor foto precum Photoshop sau Sketch. Dar nu este! În aceste zile există o mulțime de modele aparent imposibile pe care le puteți construi pe web folosind doar CSS. Și cu un constructor de pagini precum Divi, nici nu trebuie să știți prea multe despre CSS pentru a crea acest tip de modele. De aceea, astăzi, vă voi arăta cum să proiectați pereți foto 3D în Divi.

Trucul este să folosiți proprietatea perspectivă css. Cu doar o singură linie de CSS adăugată la un element părinte, puteți utiliza opțiunile de transformare încorporate ale Divi pentru a roti elementele în modele 3D asemănătoare vieții.

Să începem!

Trage cu ochiul

Iată o scurtă privire asupra pereților 3D Photo pe care îi vom proiecta astăzi.

Descărcați GRATUIT exemplele de proiectare 3D Wall Wall

Pentru a vă pune mâinile pe desenele 3D ale pereților din acest tutorial, va trebui mai întâi să îl descărcați folosind butonul de mai jos. Pentru a avea acces la descărcare, va trebui să vă abonați la lista noastră de e-mail Divi Daily folosind formularul de mai jos. Ca nou abonat, veți primi și mai multe bunătăți Divi și un pachet Divi Layout gratuit în fiecare luni! Dacă sunteți deja pe listă, pur și simplu introduceți adresa de e-mail mai jos și faceți clic pe descărcare. Nu veți fi „resubscris” și nu veți primi e-mailuri suplimentare.

Descărcați fișierele

Descarcă gratis

Înscrieți-vă la buletinul informativ Divi și vă vom trimite prin e-mail o copie a pachetului final de planificare a paginii de destinație Divi, plus o mulțime de alte resurse, sfaturi și trucuri uimitoare și gratuite Divi. Urmăriți-vă și veți fi un maestru Divi în cel mai scurt timp. Dacă sunteți deja abonat, pur și simplu introduceți adresa de e-mail de mai jos și faceți clic pe descărcare pentru a accesa pachetul de aspect.

DESCARCA

V-ați abonat cu succes. Vă rugăm să verificați adresa de e-mail pentru a vă confirma abonamentul și pentru a obține acces la pachetele de layout Divi săptămânale gratuite!

Pentru a importa aspectul în pagina dvs., pur și simplu extrageți fișierul zip și trageți fișierul json în Divi Builder.

Să trecem la tutorial, nu-i așa?

Abonați-vă la canalul nostru Youtube

Noțiuni de bază

Pentru a începe cu acest tutorial, tot ce aveți nevoie este Tema Divi instalată și activă. Veți avea nevoie de câteva imagini cu care să lucrați, așa că nu ezitați să utilizați aceleași imagini pe care le folosesc din pachetul de layout al agenției de turism. După aceea, va trebui să creați o pagină nouă, să dați pagina și titlul și să implementați Divi Builder pentru a construi pe front-end. Apoi selectați opțiunea „construiți de la zero”. Asta e. Pânza dvs. de design vă așteaptă!

Înțelegerea modului în care funcționează perspectiva cu opțiunile de transformare

Dacă ați luat vreodată un curs de artă de bază, probabil că sunteți familiarizați cu perspectiva. Este o tehnică utilizată de artiști pentru a desena obiecte care par a fi 3D, chiar dacă există pe o bucată de hârtie sau pânză 2D. În designul web, puteți poziționa elemente în poziții 3D utilizând proprietatea de transformare. În Divi, aceste opțiuni de transformare sunt încorporate în constructorul Divi. Proprietatea principală de transformare care pune un element într-o poziție 3D este rotirea transformării, care vă permite să rotiți elementele de-a lungul axelor z, x sau y. Cu toate acestea, dacă rotiți un articol utilizând rotire transformare, elementul nu va apărea ca 3D decât dacă se aplică proprietatea perspectivă.

De exemplu, să presupunem că aveți un singur modul de imagine cu o imagine adăugată la un rând de o coloană.

Apoi utilizați proprietatea de rotire a transformării pentru a roti imaginea de-a lungul axei x. Imaginea se va roti, dar va rămâne 2D, astfel încât imaginea să arate pur și simplu ca și cum ar fi fost stoarsă de sus și de jos pentru a deveni mai scurtă.

Acum, dacă adăugați perspectivă folosind un fragment mic de CSS la elementul principal al rândului (care este un element părinte al imaginii), adăugați perspectivă la imagine. În funcție de valoarea perspectivei, puteți crește sau micșora distanța pe care apare obiectul de la utilizatorul care se uită la ecran. Iată un exemplu de cum va arăta imaginea dacă adăugați „perspectivă: 600px” la rând.

Puteți vedea că partea superioară a imaginii este mai mică și partea inferioară a imaginii este mai mare, creând efectul 3D de perspectivă. Practic, imaginea arată la 900 px distanță de utilizatorul care vizualizează pagina.

În acest tutorial, voi folosi aceeași tehnică pentru a roti un întreg rând de imagini și apoi pentru a adăuga perspectivă secțiunii părinte pentru a crea pereți foto 3D.

Proiectarea pereților foto 3D de sus și de jos

În acest prim design, vom adăuga un perete foto 3D în partea de sus și în partea de jos a unui singur tip de text care poate fi folosit ca titlu. Iată cum să o faci.

Crearea peretelui foto de top 3D

Pentru a începe lucrurile pe noua dvs. pagină, creați o secțiune obișnuită cu un rând cu patru coloane.

În coloana 1, adăugați un modul de imagine cu prima dvs. imagine. Toate imaginile pe care le folosesc în acest exemplu sunt de 600 x 800 px.

După ce încărcați imaginea în modulul de imagine, actualizați umplutura după cum urmează:

Căptușeală personalizată: 3% sus, 3% jos, 3% stânga, 3% dreapta

Duplicați (sau copiați și lipiți) imaginea și adăugați-le la fiecare dintre cele patru coloane, astfel încât să aveți trei imagini în fiecare dintre cele patru coloane astfel.

Aceasta va servi drept perete superior (sau tavan) pe care îl vom roti și vom adăuga perspectivă pentru a crea designul peretelui 3D.

Personalizați secțiunea pentru a adăuga perspectivă și a ascunde depășirea

Deoarece vom roti modulul rând (nu imagini individuale), trebuie să adăugăm proprietatea perspectivă la părintele rândului, care este secțiunea. Și pentru a împiedica imaginile să iasă în afara containerului de secțiune, trebuie să adăugăm preaplin ascuns atât la preaplin vertical cât și orizontal.

Pentru aceasta deschideți setarea secțiunii și actualizați următoarele:

Culoare fundal: # 000000
Împletire personalizată: 0 px sus, 0 px jos

Pentru a adăuga proprietatea perspectivă, adăugați următorul CSS personalizat la elementul principal:

Element principal CSS:

perspective: 400px;

A se vedea proprietățile de revărsare după cum urmează:

Overflow orizontal: ascuns
Vertical Overflow: ascuns

Actualizați setările rândului: lățimea și lățimea jgheabului

Acum este timpul să personalizați rândul pentru a-l pregăti pentru designul 3D rotit. Pentru a face acest lucru, vom micșora lățimea și vom scăpa de orice margine dintre imagini prin actualizarea lățimii jgheabului.

Deschideți setările rândului și actualizați următoarele:

Lățimea jgheabului: 1
Lățime: 300 px (desktop, tabletă și telefon)

Actualizați setările rândului: transformați rotirea și originea

Acum utilizați opțiunea Transformate rotire pentru a roti rândul după cum urmează:

Transformă rotire axa Y: -58 grade

Schimbați Originea Transformării după cum urmează:

Transformarea originii: centrul de jos (sau 100% 50%)

Actualizați setările rândului: lățimi de coloană personalizate

Deoarece dorim ca aspectul cu patru coloane să rămână pe afișajele de pe tabletă și telefon, trebuie să înlocuim CSS pentru lățimea coloanei la acele puncte de întrerupere. Pentru a face acest lucru, trebuie să adăugăm o proprietate de lățime css la fiecare dintre coloane. Sub fila avansată, adăugați următorul fragment CSS personalizat la elementul principal al fiecărei coloane, după cum urmează:

(notă: asigurați-vă că lățimea jgheabului este setată la 1 sau acest lucru nu va funcționa)

Coloana 1 Element principal:

width: 25% !important;

Coloana 2 Element principal:

width: 25% !important;

Coloana 3 Element principal:

width: 25% !important;

Coloana 4 Element principal:

width: 25% !important;

Asta e. A fost creat primul nostru perete foto 3D.

Creați secțiunea de titlu

Pentru a crea titlul nostru pentru proiectare, trebuie să creăm o nouă secțiune obișnuită cu un rând cu o coloană direct sub secțiunea curentă.

Înainte de a adăuga un modul, actualizați secțiunea cu un fundal negru:

Culoare fundal: # 000000

Apoi adăugați aceeași proprietate de perspectivă la elementul principal al secțiunii, așa cum am făcut înainte, după cum urmează:

Apoi adăugați un modul text la rând cu următoarele:

Conținut: Fotografie

Font text: Titillium Web
Stil de text text: TT
Culoarea textului textului: #ffffff
Dimensiune text text: 5vw
Spațiere scrisoare text: 6 px
Înălțimea liniei de text: 1em
Orientare text: centru

Acum, putem adăuga o rotație de transformare la modulul text. Cu perspectiva setată la părinte (sau secțiune), efectul 3D va apărea odată ce rotim textul.

Adăugați valorile de rotire a transformării după cum urmează:

Transformare Rotire axă X: -12 grade
Transformă rotire axa Y: 32 grade

Acum suntem gata să creăm peretele foto inferior 3D.

Creați peretele foto de jos 3D (sau podea)

Pentru a crea peretele foto inferior 3D, putem copia și lipi pur și simplu secțiunea superioară care conține peretele superior și lipiți-o direct sub secțiunea de titlu.

Apoi, actualizați setările de rând ale noii secțiuni după cum urmează:

Transformă rotire axa Y: 58 grade

Transform Origin: Top Center

Design final

Asta e! Să verificăm designul final.

Designul va rămâne, de asemenea, intact și pe mobil (în afară de un mic overflow).

Crearea zidurilor foto 3D stânga și dreapta

Pentru următorul design, vom crea pereți foto 3D în partea stângă și dreapta a rubricii noastre, în loc de sus și de jos. Pentru a porni rapid procesul de proiectare, vom folosi unele dintre proiectele noastre pre-construite în primul nostru exemplu.

Începând de la început, copiați secțiunea de jos a primului exemplu de proiectare care conține peretele de imagine de jos. Apoi deschideți setările de rând ale noii secțiuni și resetați opțiunile de transformare înapoi la starea implicită.

Următorul dublează rândul.

Apoi, copiați rândul (nu secțiunea) care conține modulul text cu titlul din primul exemplu de proiectare. Apoi lipiți-l între cele două rânduri care conțin imaginile.

Aceasta este o configurație similară cu primul design, cu excepția tuturor rândurilor noastre în interiorul unei secțiuni. Acest lucru este important pentru următorul pas.

Vrem ca pereții noștri ai imaginilor să fie în stânga și în dreapta paginii, cu textul în centru. O modalitate ușoară de a face acest lucru este să folosiți afișajul flex pe secțiunea noastră. Aceasta va alinia rândurile noastre orizontal în secțiune.

Pentru aceasta, deschideți setările secțiunii și adăugați următoarele elemente CSS personalizate la elementul principal:

(Observați că mărim valoarea perspectivei la 700 px pentru a crea o distanță mai mare de „spațiu Z” din perspectiva utilizatorului.)

Element principal CSS:

perspective: 700px;
display:flex;

Și voila! Pereții noștri sunt la locul lor și gata de rotație.

Adăugați mai multe imagini pentru un perete superior

Pentru a face peretele foto 3D un pic mai înalt, tot ce trebuie să facem este să adăugăm o altă imagine la fiecare dintre cele patru coloane din fiecare dintre rândurile care conțin imagini. Asigurați-vă că transportă peste 3% căptușeala ca și celelalte.

Modificarea lățimii celor două rânduri laterale

Înainte de a ne roti peretele de imagine, mai întâi trebuie să le ajustăm lățimea la 100%. Deschideți setările de rând pentru peretele de imagini din partea stângă și actualizați următoarele:

Lățime: 100% (desktop, tabletă, telefon)
Lățime maximă: 100%

Apoi faceți același lucru pentru rândul din partea dreaptă.

Rotirea rândurilor laterale pentru efect 3D

Acum suntem gata să adăugăm rotația transformării la fiecare dintre rândurile noastre. Mai întâi, deschideți setările de rând pentru rândul din stânga și actualizați următoarele:

Transformare Rotire axă X: 90 grade

Apoi, deschideți setările de rând pentru rândul din partea dreaptă și actualizați următoarele:

Transformare Rotire axă X: -90 grade

Având perspectiva noastră la nivel de secțiune, rândurile noastre se vor afișa ca pereți foto 3D pe fiecare parte a modulului nostru de text.

Rezultat final

Să verificăm rezultatul final.

Pentru a pune puțină cireașă pe tort, puteți adăuga o imagine de fundal cu elemente grafice 3D. Iată un exemplu de design cu o imagine de fundal preluată din pachetul de aspect Cryptocurrency.

Efect bonus Hover: Rotiți acei pereți în View on Hover!

Puteți adăuga cu ușurință un efect de transformare rotire hover care va permite utilizatorului să vizualizeze peretele imaginii prin rotirea acestuia în vizualizare pe hover. Pentru aceasta, deschideți setările rândului din stânga și actualizați următoarele:

Transformare origine: centru stânga
Transformare Rotire axă X (deplasare): 0 grade

Apoi, în setările de rând din dreapta, actualizați următoarele:

Transformă Originea: centrul drept
Transformare Rotire axă X (deplasare): 0 grade

Acum verificați rezultatul.

Efect de design bonus: faceți ca imaginile să se spargă în spațiu

Deoarece rândul de imagini este rotit cu perspectiva în loc, puteți muta imaginile în rândul dvs. folosind transformarea transformată. Ce este interesant la acest lucru este că mișcarea va rămâne de-a lungul planului 3D. Pentru a face acest lucru, pur și simplu deschideți setările unei imagini și utilizați opțiunea de transformare a transformării pentru a muta imaginea în afara grilei în spațiu!

Iată un exemplu de cum ar arăta asta prin adăugarea câtorva valori traduse în imagini.

Gânduri finale

Crearea pereților foto 3D în Divi are un impact impresionant asupra designului unei pagini. Și trebuie să spun că este foarte distractiv să experimentezi diferite modele folosind tehnicile din acest articol. Proprietatea perspectivă funcționează mână în mână cu opțiunile de transformare pentru a crea o viață nenumărată, cum ar fi desenele 3D! Și nu uitați că aceste rânduri (sau pereți) pot fi umplute cu orice modul din Divi. Așadar, nu ezitați să încercați și câteva blurbs. Sper că acest lucru vă va inspira să creați ceva unic astăzi.

Aștept cu nerăbdare să aud de la dvs. în comentarii.

Noroc!