Come utilizzare la prospettiva con le opzioni di trasformazione per progettare pareti fotografiche 3D in Divi
Pubblicato: 2019-05-04Progettare un muro di foto 3D sembra possibile solo utilizzando un editor di foto come Photoshop o Sketch. Ma non lo è! In questi giorni ci sono un sacco di progetti apparentemente impossibili che puoi costruire sul web usando solo CSS. E con un generatore di pagine come Divi, non hai nemmeno bisogno di sapere molto sui CSS per creare questo tipo di design. Ecco perché oggi ti mostrerò come progettare pareti fotografiche 3D in Divi.
Il trucco è usare la proprietà css di prospettiva. Con una sola riga di CSS aggiunta a un elemento genitore, puoi utilizzare le opzioni di trasformazione integrate di Divi per ruotare gli elementi in progetti 3D realistici.
Iniziamo!
Sbirciata
Ecco un'anteprima delle pareti fotografiche 3D che progetteremo oggi.
Scarica gli esempi di progettazione di 3D Photo Wall Layout GRATUITAMENTE
Per mettere le mani sui design delle pareti fotografiche 3D di questo tutorial, dovrai prima scaricarlo utilizzando il pulsante in basso. Per accedere al download dovrai iscriverti alla nostra mailing list Divi Daily utilizzando il modulo sottostante. Come nuovo abbonato, riceverai ancora più bontà Divi e un pacchetto Divi Layout gratuito ogni lunedì! Se sei già nell'elenco, inserisci semplicemente il tuo indirizzo email qui sotto e fai clic su download. Non sarai "riabbonato" o riceverai email extra.
Scarica gratis
Iscriviti alla newsletter Divi e ti invieremo via email una copia dell'ultimo Divi Landing Page Layout Pack, oltre a tonnellate di altre incredibili risorse Divi gratuite, suggerimenti e trucchi. Seguici e diventerai un maestro Divi in pochissimo tempo. Se sei già iscritto, digita il tuo indirizzo e-mail qui sotto e fai clic su download per accedere al pacchetto di layout.
Ti sei iscritto con successo. Controlla il tuo indirizzo e-mail per confermare la tua iscrizione e ottenere l'accesso ai pacchetti di layout Divi settimanali gratuiti!
Per importare il layout nella tua pagina, estrai semplicemente il file zip e trascina il file json nel Divi Builder.
Andiamo al tutorial, vero?
Iscriviti al nostro canale Youtube
Iniziare
Per iniziare con questo tutorial, tutto ciò di cui hai bisogno è il tema Divi installato e attivo. Avrai bisogno di alcune immagini con cui lavorare, quindi sentiti libero di usare le stesse immagini che sto usando dal pacchetto di layout dell'agenzia di viaggi. Successivamente, dovrai creare una nuova pagina, fornire la pagina e il titolo e distribuire Divi Builder per costruire sul front-end. Quindi seleziona l'opzione "costruisci da zero". Questo è tutto. La tua tela di design ti aspetta!
Capire come funziona la prospettiva con le opzioni di trasformazione
Se hai mai seguito un corso d'arte di base, probabilmente hai familiarità con la prospettiva. È una tecnica utilizzata dagli artisti per disegnare oggetti che sembrano 3D anche se esistono su un pezzo di carta o tela 2D. Nel web design, puoi posizionare gli elementi in posizioni 3D usando la proprietà di trasformazione. In Divi, queste opzioni di trasformazione sono integrate nel Divi builder. La principale proprietà di trasformazione che mette un elemento in una posizione 3D è trasformazione e rotazione, che consente di ruotare gli elementi lungo l'asse z, x o y. Tuttavia, se si ruota un elemento utilizzando la rotazione trasforma, l'elemento non apparirà come 3D a meno che non venga applicata la proprietà prospettiva.
Ad esempio, supponiamo di avere un singolo modulo immagine con un'immagine aggiunta a una riga di una colonna.
Quindi si utilizza la proprietà di rotazione della trasformazione per ruotare l'immagine lungo l'asse x. L'immagine ruoterà ma rimarrà 2D, quindi l'immagine sembrerà semplicemente schiacciata dall'alto e dal basso per accorciarsi.
Ora se aggiungi prospettiva usando un piccolo frammento di CSS all'elemento principale della riga (che è un elemento genitore dell'immagine), aggiungi prospettiva all'immagine. A seconda del valore della prospettiva, è possibile aumentare o diminuire la distanza in cui l'oggetto appare dall'utente che guarda lo schermo. Ecco un esempio di come apparirà l'immagine se aggiungi "prospettiva: 600 px" alla riga.
Puoi vedere che la parte superiore dell'immagine è più piccola e la parte inferiore dell'immagine è più grande, creando l'effetto prospettico 3D. Fondamentalmente l'immagine sembra a 900 px di distanza dall'utente che visualizza la pagina.
In questo tutorial, utilizzerò questa stessa tecnica per ruotare un'intera riga di immagini e quindi aggiungere prospettiva alla sezione principale per creare pareti di foto 3D.
Progettare pareti fotografiche 3D superiori e inferiori
In questo primo progetto, aggiungeremo un muro di foto 3D nella parte superiore e inferiore di un singolo testo che può essere utilizzato come intestazione. Ecco come farlo.
Creazione della parete di foto 3D superiore
Per iniziare le cose sulla tua nuova pagina, crea una sezione normale con una riga di quattro colonne.
Nella colonna 1, aggiungi un modulo immagine con la tua prima immagine. Tutte le immagini che sto usando in questo esempio sono 600px per 800px.
Una volta caricata l'immagine nel modulo immagine, aggiorna il riempimento come segue:
Imbottitura personalizzata: 3% in alto, 3% in basso, 3% a sinistra, 3% a destra
Duplica (o copia e incolla) l'immagine e aggiungile a ciascuna delle quattro colonne in modo da avere tre immagini in ciascuna delle quattro colonne come questa.
Questo servirà come parete superiore (o soffitto) che ruoteremo e aggiungeremo prospettiva per creare il design della parete 3D.
Personalizza la sezione per aggiungere prospettiva e nascondere l'overflow
Dato che ruoteremo il modulo riga (non le singole immagini), dobbiamo aggiungere la proprietà prospettiva al genitore della riga che è la sezione. E per evitare che le immagini escano dal contenitore della sezione, dobbiamo aggiungere l'overflow nascosto sia all'overflow verticale che a quello orizzontale.
Per fare ciò, apri l'impostazione della sezione e aggiorna quanto segue:
Colore di sfondo: #000000
Imbottitura personalizzata: 0px in alto, 0px in basso
Per aggiungere la proprietà prospettiva, aggiungi il seguente CSS personalizzato all'elemento principale:
Elemento principale CSS:
perspective: 400px;
Vedere le proprietà di overflow come segue:
Overflow orizzontale: nascosto
Overflow verticale: nascosto 
Aggiorna impostazioni riga: larghezza e larghezza grondaia
Ora è il momento di personalizzare la riga per prepararla al disegno 3D ruotato. Per fare ciò, ridurremo la larghezza ed elimineremo qualsiasi margine tra le immagini aggiornando la larghezza della grondaia.
Apri le impostazioni della riga e aggiorna quanto segue:
Larghezza grondaia: 1
Larghezza: 300 px (desktop, tablet e telefono)
Aggiorna impostazioni riga: Trasforma Ruota e Origin
Ora usa l'opzione di rotazione della trasformazione per ruotare la riga come segue:
Trasforma Ruota asse Y: -58deg
Cambia l'origine della trasformazione come segue:
Trasforma origine: in basso al centro (o 100% 50%)
Aggiorna impostazioni riga: larghezze colonne personalizzate
Poiché vogliamo che il layout a quattro colonne rimanga sui display di tablet e telefoni, dobbiamo sovrascrivere il css per la larghezza della colonna in quei punti di interruzione. Per fare ciò è necessario aggiungere una proprietà css di larghezza a ciascuna delle colonne. Nella scheda Avanzate, aggiungi il seguente snippet CSS personalizzato all'elemento principale di ogni colonna come segue:
(nota: assicurati che la larghezza della grondaia sia impostata su 1 o questo non funzionerà)
Colonna 1 Elemento principale:
width: 25% !important;
Colonna 2 Elemento principale:
width: 25% !important;
Colonna 3 Elemento principale:
width: 25% !important;
Colonna 4 Elemento principale:
width: 25% !important;
Questo è tutto. Il nostro primo muro di foto 3D è stato creato.
Crea la sezione di intestazione
Per creare la nostra intestazione per il design, dobbiamo creare una nuova sezione regolare con una riga a una colonna direttamente sotto la sezione corrente.
Prima di aggiungere un modulo, aggiorna la sezione con uno sfondo nero:
Colore di sfondo: #000000
Quindi aggiungi la stessa proprietà prospettiva all'elemento principale della sezione come abbiamo fatto prima come segue:
Quindi aggiungi un modulo di testo alla riga con quanto segue:
Contenuto: Fotografia
Carattere del testo: Titillium Web
Stile del carattere del testo: TT
Colore del testo del testo: #ffffff
Dimensione del testo del testo: 5vw
Spaziatura delle lettere del testo: 6px
Altezza riga di testo: 1em
Orientamento del testo: al centro
Ora possiamo aggiungere una rotazione di trasformazione al modulo di testo. Con la prospettiva impostata sul genitore (o sezione) l'effetto 3D si verificherà una volta ruotato il testo.
Aggiungi i valori di rotazione della trasformazione come segue:
Trasforma Ruota asse X: -12deg
Trasforma Ruota asse Y: 32 gradi
Ora siamo pronti per creare il muro di foto 3D inferiore.
Crea la parete foto 3D inferiore (o pavimento)
Per creare la parete di foto 3D inferiore, possiamo semplicemente copiare e incollare la sezione superiore contenente la parete superiore e incollarla direttamente sotto la sezione dell'intestazione.
Successivamente, aggiorna le impostazioni di riga della nuova sezione come segue:
Trasforma Ruota asse Y: 58 gradi
Trasforma origine: in alto al centro
Progetto definitivo
Questo è tutto! Diamo un'occhiata al progetto finale.
Il design rimarrà intatto anche su dispositivi mobili (a parte un piccolo overflow).
Creazione di pareti foto 3D sinistra e destra
Per questo prossimo progetto, creeremo pareti fotografiche 3D sul lato sinistro e destro della nostra intestazione invece che in alto e in basso. Per avviare il processo di progettazione, utilizzeremo alcuni dei nostri progetti predefiniti nel nostro primo esempio.
Per iniziare, duplica la sezione inferiore del primo esempio di design contenente la parete dell'immagine inferiore. Quindi apri le impostazioni di riga della nuova sezione e ripristina le opzioni di trasformazione allo stato predefinito.
Quindi duplica la riga.
Quindi, copia la riga (non la sezione) contenente il modulo di testo con l'intestazione nel primo esempio di progettazione. Quindi incollalo tra le due righe contenenti le immagini.
Questa è una configurazione simile al primo disegno, tranne per il fatto che tutte le nostre righe sono all'interno di una sezione. Questo è importante per il passaggio successivo.
Vogliamo che i nostri due muri di immagini siano a sinistra e a destra della pagina con il testo al centro. Un modo semplice per farlo è utilizzare display flex nella nostra sezione. Questo allineerà le nostre righe orizzontalmente all'interno della sezione.
Per fare ciò, apri le impostazioni della sezione e aggiungi il seguente CSS personalizzato all'elemento principale:
(Si noti che stiamo aumentando il valore della prospettiva a 700 px per creare più distanza "spazio Z" della prospettiva dell'utente.)
Elemento principale CSS:
perspective: 700px; display:flex;
E voilà! Le nostre pareti sono a posto e pronte per la rotazione.
Aggiungi più immagini per un muro più alto
Per rendere il nostro muro di foto 3D un po' più alto, tutto ciò che dobbiamo fare è aggiungere un'altra immagine a ciascuna delle nostre quattro colonne in ciascuna delle righe contenenti immagini. Assicurati solo che riportino l'imbottitura del 3% come gli altri.
Modifica della larghezza delle due righe laterali
Prima di ruotare il nostro muro di immagini, dobbiamo prima regolare la loro larghezza al 100%. Apri le impostazioni di riga per il muro di immagini sul lato sinistro e aggiorna quanto segue:
Larghezza: 100% (desktop, tablet, telefono)
Larghezza massima: 100%
Quindi fai lo stesso per la riga sul lato destro.
Rotazione delle righe laterali per l'effetto 3D
Ora siamo pronti per aggiungere la nostra rotazione di trasformazione a ciascuna delle nostre righe. Innanzitutto, apri le impostazioni della riga per la riga sinistra e aggiorna quanto segue:
Trasforma Ruota asse X: 90 gradi
Quindi, apri le impostazioni di riga per la riga sul lato destro e aggiorna quanto segue:
Trasforma Ruota asse X: -90deg
Con la nostra prospettiva in atto a livello di sezione, le nostre righe verranno visualizzate come pareti di foto 3D su ciascun lato del nostro modulo di testo.
Risultato finale
Diamo un'occhiata al risultato finale.
Per mettere un po' di ciliegina sulla torta, puoi aggiungere un'immagine di sfondo con elementi grafici 3D. Ecco un esempio del design con un'immagine di sfondo presa dal Cryptocurrency Layout Pack.
Effetto bonus al passaggio del mouse: fai oscillare quei muri in vista al passaggio del mouse!
Puoi facilmente aggiungere un effetto di trasformazione e rotazione al passaggio del mouse che consentirà all'utente di visualizzare il muro dell'immagine facendolo oscillare in vista al passaggio del mouse. Per fare ciò, apri le impostazioni della riga sinistra e aggiorna quanto segue:
Trasforma origine: centro sinistra
Trasforma Ruota asse X (hover): 0deg
Quindi nelle impostazioni della riga di destra, aggiorna quanto segue:
Trasforma Origine: centro destra
Trasforma Ruota asse X (hover): 0deg
Ora controlla il risultato.
Effetto design bonus: fai in modo che le immagini si disperdano nello spazio
Poiché la riga di immagini viene ruotata con la prospettiva in posizione, è possibile spostare le immagini all'interno della riga utilizzando la trasformazione e la traduzione. La cosa interessante di questo è che il movimento rimarrà lungo il piano 3D. Per fare ciò, apri semplicemente le impostazioni di un'immagine e usa l'opzione di trasformazione e traduci per spostare l'immagine fuori dalla griglia nello spazio!
Ecco un esempio di come apparirebbe aggiungendo alcuni valori di traduzione di trasformazione alle immagini.
Pensieri finali
La creazione di fotomurali 3D in Divi ha davvero un impatto impressionante sul design di una pagina. E devo dire che è davvero divertente sperimentare diversi design usando le tecniche in questo articolo. La proprietà prospettiva funziona di pari passo con le opzioni di trasformazione per creare innumerevoli forme di vita come i progetti 3D! E non dimenticare che queste righe (o pareti) possono essere riempite con qualsiasi modulo in Divi. Quindi sentiti libero di provare anche alcuni blurb. Spero che questo ti ispiri a creare qualcosa di unico oggi.
Non vedo l'ora di sentirti nei commenti.
Saluti!