Creazione di un senso del 3D con la proprietà Prospettiva di CSS3

Cosa starai creando

In questo tutorial, creeremo un elemento interattivo con la proprietà della prospettiva CSS3 per dare un senso delle tre dimensioni. Questo tutorial ti insegnerà anche come utilizzare jQuery con gli eventi del mouse per ottenere posizioni di elementi in JavaScript e come manipolare le proprietà CSS.

La struttura HTML per la proprietà prospettiva

Abbiamo bisogno di una relazione genitore-figlio affinché la proprietà della prospettiva funzioni correttamente. Creiamo prima la struttura HTML e poi continuiamo con lo stile CSS.

    
  Montagna
 5 giorni
 
 
 
   
  Isola
 2 giorni

Qui ne stiamo avvolgendo due carta elementi in un div con l'id di cardsWrapper. Inoltre, questo cardsWrapper è avvolto in un altro div in modo da essere in grado di manipolare facilmente la sua posizione all'interno del viewport.

Ogni elemento con la classe di carta ha un Immagine elemento, che abbraccia il schermo e testo elementi. Per ora la struttura è un po 'vaga, ma spiegherò l'uso di ogni elemento nelle prossime sezioni correlate.

Usiamo il seguente stile CSS per posizionare i nostri elementi.

#mainWrapper display: flex; justify-content: center; align-items: center; altezza: 350 px;  #cardsWrapper display: flex; justify-content: space-between; larghezza: 700 px;  .card width: 300px; altezza: 175 px; colore di sfondo: rosso;  .image width: 100%; altezza: 100%; colore di sfondo: rosso;

Utilizzando la proprietà Prospettiva

Il prospettiva la proprietà è qualcosa che devi impostare nel tuo genitore div che contiene i div che vuoi trasformare con il senso della prospettiva. Immagina che il genitore div sia il tuo mondo, e ha un certo valore prospettico che stai vivendo.

Aggiungiamo il prospettiva proprietà al nostro genitore div, che è carta. Stiamo selezionando il carta elemento come genitore, no cardsWrapper, dal momento che vogliamo avere un effetto prospettico individuale su ogni elemento della carta.

Tweak il CSS del carta come segue.

.card width: 300px; altezza: 175 px; colore di sfondo: rosso; prospettiva: 500px;

Ora prova ad aggiungere un trasformare proprietà all'elemento immagine per vedere l'effetto della prospettiva.

.immagine larghezza: 100%; altezza: 100%; colore di sfondo: rosso; transform: ruotareX (30 gradi);

Da Immagine è il figlio diretto di carta, è influenzato dalla prospettiva. Tuttavia, se provi ad aggiungere un trasformare proprietà a qualsiasi figlio del Immagine, questo non funzionerebbe.

Affinché questi bambini possano essere trasformati rispetto al loro genitore, che è il Immagine elemento in questo esempio, dovresti usare stile di trasformazione: preserve-3d sull'elemento genitore.

.immagine larghezza: 100%; altezza: 100%; transform-style: preserve-3d; transform: ruotareX (30 gradi);

Ora abbiamo uno sfondo sufficiente nella proprietà della prospettiva e siamo pronti a continuare con lo styling degli altri elementi.

Non dimenticare di rimuovere il trasformare: ruotareX (30 gradi) dal tuo elemento immagine.

Disegnare le carte

Abbiamo un Immagine elemento e su di esso abbiamo un elemento chiamato schermo, e poi il testo. Dal momento che stiamo usando la prospettiva qui, puoi pensare a ciascuno di questi elementi come a livelli individuali.

Ora aggiungeremo un'immagine di sfondo al nostro Immagine div e poi stile il schermo e testo elementi.

Usiamo il seguente stile CSS per aggiungere un'immagine di sfondo a ogni singolo oggetto di carta.

.image.first background-image: url ("https://c1.staticflickr.com/1/343/31652757460_b2b5794a51_n.jpg");  .image.second background-image: url ("https://c2.staticflickr.com/2/1506/25121644830_2d768ef51a_n.jpg");

Ora modelleremo il schermo elemento.

Dal momento che vogliamo il schermo elemento esattamente della stessa dimensione del suo genitore Immagine elemento, utilizziamo valori di larghezza e altezza del 100% e un colore di sfondo nero grigio con un canale alfa.

La parte di importazione è trasformare: translateZ (30px) scale (0.940).

Quindi qui ci limitiamo a tradurre il schermo elemento sull'asse Z di 20px. Questo lo rende al passaggio del mouse sopra il Immagine elemento. Dal momento che è verso di noi, sarà di dimensioni maggiori, a causa delle regole della prospettiva. Pertanto, lo ridimensioniamo per abbinare la dimensione con l'elemento genitore. Se si utilizzano valori di traduzione diversi, il valore della scala varierà. Allo stesso modo, la definizione di diverse altezze e larghezze per l'elemento genitore comporterebbe il requisito di un diverso valore di scala.

.screen background-color: rgba (0, 0, 0, 0.22); larghezza: 100%; altezza: 100%; transform: translateZ (30px) scale (0.940);

Per capire cosa sta succedendo qui, basta ruotare il tuo Immagine elemento attorno agli assi X e Y aggiungendo la seguente riga nella regola CSS:

trasformare: ruotareX (30 gradi) RuotaY (30 gradi)

Ora l'ultima parte di questa sezione è lo stile testo elemento, che è piuttosto banale.

Fondamentalmente stiamo usando le stesse impostazioni di trasformazione per il testo elemento per averlo allo stesso livello del schermo elemento. Il resto del CSS è solo uno stile semplice. Puoi modificarlo nel modo che preferisci.

.testo posizione: assoluto; fondo: 25px; a sinistra: 30 px; colore bianco; transform: translateZ (30px) scale (0.940);  .text p cursor: default; padding: 0; margine: 0;  .text p: first-of-type font-size: 2em; margin-bottom: 5px;  .text p: last-of-type font-size: 1em;

Questo è il risultato finale con rotazione manuale per vedere l'effetto.

Prima di proseguire, elimina le regole di rotazione dal tuo CSS, poiché controlleremo automaticamente la rotazione in base alla posizione del cursore.

Ora scriveremo un codice jQuery per rendere queste carte interattive.

Andiamo ad esso!

Aggiunta di interazione con jQuery

Iniziamo con il codice jQuery di base.

(function ($) ) (jQuery);

Scriveremo tutto all'interno di questa funzione. Ciò consentirà a jQuery di attendere fino a quando il DOM non sarà pronto.

Poiché siamo interessati a interagire con i nostri carta elemento, dobbiamo selezionarlo.

(function ($) var card = $ (". card");) (jQuery);

Il prossimo passo è registrare la posizione del cursore sull'elemento della carta. Per fare ciò, useremo il built-in MouseMove evento.

(function ($) var card = $ (". card"); card.on ('mousemove', function (e) );) (jQuery);

Ora dobbiamo monitorare la posizione del cursore. È un po 'complicato ottenere i valori corretti.

(function ($) var card = $ (". card"); card.on ('mousemove', function (e) var x = e.clientX - $ (this) .offset (). left + $ ( window) .scrollLeft (); var y = e.clientY - $ (this) .offset (). top + $ (window) .scrollTop (););) (jQuery);

Qui, e.clientX e e.clientY restituisce la posizione del cursore all'interno del viewport. Tuttavia, dal momento che ciascuno carta l'oggetto è posizionato rispetto al viewport, abbiamo bisogno di compensare questo estraendo i valori di offset di sinistra e superiore.

L'ultima e la cosa più importante da considerare è la compensazione per lo scorrimento delle finestre. Quindi, poiché la posizione del cursore è registrata rispetto alla tua finestra ma i valori di offset sono fissi, quando si scorre, l'oggetto si avvicina alla parte superiore o sinistra della finestra a seconda della direzione in cui si scorreva.

Di conseguenza, la nostra distanza relativa verso l'alto o il sinistro del viewport sarebbe più piccola. Tuttavia, poiché i valori di offset sono corretti, dobbiamo compensare questo, e questo è fatto dal $ (Window) .scrollLeft () e $ (Window) .scrollTop (). Quindi, aggiungendo quei valori alle rispettive variabili, compensiamo semplicemente l'importo che abbiamo scostato. Di conseguenza, quando si passa con il mouse su uno dei tuoi carta elementi, la tua posizione X va da 0 alla larghezza della carta, che è definita come 300 px. Allo stesso modo, la posizione Y dovrebbe essere compresa tra 0 e l'altezza della carta, che è 175 px.

Il prossimo passo è mappare la posizione del cursore su un nuovo intervallo, che sarà la quantità di rotazione che vogliamo applicare in unità di misura, in modo che quando il cursore si trova nel mezzo dell'elemento di carta, sembrerebbe solo piatto, ma quando ti sposti verso sinistra / destra o sopra / sotto, otterrai un effetto di rotazione come se la carta seguisse il cursore.

Ecco una rapida illustrazione per il risultato della funzione di mappatura.

mappa delle funzioni (x, in_min, in_max, out_min, out_max) return (x - in_min) * (out_max - out_min) / (in_max - in_min) + out_min;

In questa funzione, il in_min e in_max i parametri sono rispettivamente i valori minimo e massimo del valore di input, che corrispondono alla larghezza e all'altezza del carta elemento. out_min e out_max sono i valori minimo e massimo che l'input verrà mappato.

Usiamo questa funzione mappa con le nostre posizioni del cursore X e Y..

(function ($) var card = $ (". card"); card.on ('mousemove', function (e) var x = e.clientX - $ (this) .offset (). left + $ ( window) .scrollLeft (); var y = e.clientY - $ (this) .offset (). top + $ (window) .scrollTop (); var rY = map (x, 0, $ (this) .width ( ), -17, 17); var rX = map (y, 0, $ (this) .height (), -17, 17);); function map (x, in_min, in_max, out_min, out_max) return (x - in_min) * (out_max - out_min) / (in_max - in_min) + out_min;) (jQuery);

Ora i nostri valori mappati sono rX e rY.

Il prossimo passo è l'impostazione di una regola CSS per Immagine elemento utilizzando i valori mappati come valori di rotazione.

(function ($) var card = $ (". card"); card.on ('mousemove', function (e) var x = e.clientX - $ (this) .offset (). left + $ ( window) .scrollLeft (); var y = e.clientY - $ (this) .offset (). top + $ (window) .scrollTop (); var rY = map (x, 0, $ (this) .width ( ), -17, 17); var rX = map (y, 0, $ (this) .height (), -17, 17); $ (this) .children (". Image"). Css ("transform") , "rotateY (" + rY + "deg)" + "" + "rotateX (" + -rX + "deg)");); mappa delle funzioni (x, in_min, in_max, out_min, out_max) return (x - in_min) * (out_max - out_min) / (in_max - in_min) + out_min;) (jQuery);

Qui abbiamo selezionato i bambini di carta elemento che sono nominati Immagine, e quindi imposta la regola CSS per ruotare questo elemento attorno agli assi X e Y di rX e rY gradi rispettivamente.

Ti renderai conto che gli elementi della carta seguono il cursore nelle rispettive prospettive. Tuttavia, quando il cursore è fuori dagli elementi della carta, mantengono i loro orientamenti. Inoltre, reagiscono bruscamente alla presenza del cursore sull'elemento carta. Quindi dobbiamo anche gestire quei casi quando il mouse entra e lascia l'elemento della carta.

Per gestire questi problemi, dobbiamo usare il MouseEnter e mouseLeave eventi.

Quando il mouse entra nella regione del carta elemento, aggiungiamo una regola CSS di transizione al Immagine elemento. Ciò consentirà una transizione graduale per lo "sguardo" del Immagine elemento.

card.on ('mouseenter', function () $ (this) .children (". image"). css (transition: "all" + 0.05 + "s" + "linear"););

Allo stesso modo, dobbiamo gestire il mouseLeave evento.

Qui, aggiungo anche un'altra regola CSS di transizione con una temporizzazione diversa, che rende più agevole la transizione alla posizione iniziale quando il mouse lascia la carta elemento.

Aggiungo anche la regola CSS di trasformazione per ripristinare le rotazioni del file carta elemento.

card.on ('mouseleave', function () $ (this) .children (". image"). css (transition: "all" + 0.2 + "s" + "linear"); $ (this) .children (". image"). css ("transform", "rotateY (" + 0 + "deg)" + "" + "rotateX (" + 0 + "deg)"););

Quindi il nostro codice jQuery finale assomiglia a questo:

(function ($) var card = $ (". card"); card.on ('mousemove', function (e) var x = e.clientX - $ (this) .offset (). left + $ ( window) .scrollLeft (); var y = e.clientY - $ (this) .offset (). top + $ (window) .scrollTop (); var rY = map (x, 0, $ (this) .width ( ), -17, 17); var rX = map (y, 0, $ (this) .height (), -17, 17); $ (this) .children (". Image"). Css ("transform") , "rotateY (" + rY + "deg)" + "" + "rotateX (" + -rX + "deg)");); card.on ("mouseenter", function () $ (this). children (". image"). css (transition: "all" + 0.05 + "s" + "linear",);); card.on ('mouseleave', function () $ (this). children (". image"). css (transition: "all" + 0.2 + "s" + "linear",); $ (this) .children (". image"). css ("transform", " rotateY ("+ 0 +" deg) "+" "+" rotateX ("+ 0 +" deg) ");); mappa delle funzioni (x, in_min, in_max, out_min, out_max) return (x - in_min) * (out_max - out_min) / (in_max - in_min) + out_min;) (jQuery);

Questo è il risultato finale. Ho anche usato un diverso font sans-serif su testo elemento per farlo sembrare migliore.

Conclusione

Durante questo tutorial, abbiamo imparato come utilizzare la proprietà prospettiva e la struttura HTML richiesta per farlo funzionare correttamente. Inoltre, abbiamo spiegato come registrare la posizione del cursore del mouse quando ci si posiziona sopra un elemento HTML specifico.

Oltre a ciò, abbiamo usato il MouseMove, MouseEnter, e mouseLeave eventi per introdurre l'interattività aggiungendo le regole CSS agli elementi HTML con jQuery.

Spero ti sia piaciuto questo tutorial e ho imparato alcuni metodi utili.

Codice