Come creare progetti 3D con la proprietà Transform CSS3

Ci sono due dimensioni quando si tratta della proprietà di trasformazione CSS3, 2D e 3D. Durante l'animazione, le trasformazioni vengono utilizzate per modificare un elemento da uno stato all'altro. Questo tutorial funge da espansione di questa guida sulle animazioni 2D. Fornirò alcune informazioni sulla progettazione 3D e su come creare fantastiche animazioni combinando questi concetti di base.

Le trasformazioni 3D possono essere piuttosto dettagliate e possono diventare complesse se ci sono molti pezzi diversi combinati, quindi iniziare con i blocchi di base è utile. Alcuni di questi concetti sembreranno familiari, ma la "z" è qualcosa che sembrerà nuovo quando si lavora in 3D. Le trasformazioni 3D estendono le trasformazioni CSS 2D per includere l'asse z, consentendo le trasformazioni 3D degli elementi DOM.

Cos'è l'asse Z?

Ci saranno molti riferimenti all'asse z. È facile pensarlo come la distanza di misurazione di qualcosa verso o lontano da te. Se è un valore positivo, è più vicino a te. Se è un valore negativo, è più lontano da te.

Esempi di trasformazione 3D

Le proprietà di base per la trasformazione 3D sono translate3d , scale3d , rotateX , rotateY , rotateZ , perspective e matrix3d . Più argomenti sono inclusi con translate3d , scale3d e matrix3d ​​perché accettano argomenti per x, y e z. La proprietà scale assume un valore per un angolo e anche la prospettiva assume un singolo valore.

Tradurre

traduciZ()

Questo definisce una traslazione 3D utilizzando solo il valore dell'asse z. Potresti ricordare di tradurre x e y dalla traduzione 2D. L'idea è la stessa con translateX() , translateY() e translateZ() poiché ognuno accetta un valore di lunghezza che sposta l'elemento della distanza specificata lungo l'asse corretto.

In questo esempio, translateZ(-20px) sposterà l'elemento a 20 pixel dal visualizzatore.

Ecco lo snippet di codice per creare questo esempio:

 -webkit-transform: translateZ(-20px); -ms-transform: translateZ(-20px); transform: translateZ(-20px);

traduci3d()

La funzione translate3d() viene utilizzata per spostare la posizione dell'elemento in uno spazio 3D. Questa trasformazione viene creata specificando le coordinate che definiscono quanto si sposta in ogni direzione.

La funzione transform: translate3d(20px, -15px, 70px); sposta l'immagine di 20 pixel lungo l'asse x positivo, di 15 pixel sull'asse y negativo e quindi di 70 pixel lungo l'asse z positivo.

Ecco un esempio di translate3d :

 -webkit-transform: translate3d(20px, -15px, 70px); -ms-transform: translate3d(20px, -15px, 70px); transform: translate3d(20px, -15px, 70px);

È abbastanza evidente che ci sono alcune sovrapposizioni del secondo quadrato in corso. Potrebbe non sembrare così drammatico come previsto, ma l'aggiunta della proprietà della prospettiva (più avanti in questo tutorial) sarà d'aiuto.

Ruotare

La funzione rotate3d() ruota l'elemento nello spazio 3D dell'angolo specificato intorno all'asse. Questo può essere scritto come rotate(x, y, z, angle) .

ruotaX()

I valori dei pixel non funzioneranno qui, devono essere in gradi. Il metodo rotateX() ruota un elemento attorno al suo asse x di un dato grado. Vedi come il rettangolo è più corto? Viene ruotato lungo l'asse x. Questo esempio mostra la rotazione a 55 gradi.

 -ms-transform: rotateX(55deg); /* IE 9 */ -webkit-transform: rotateX(55deg); /* Safari */ transform: rotateX(55deg);

ruotaY()

Il metodo rotateY() ruota un elemento attorno al suo asse y. Nota come il rettangolo inferiore non è largo quanto quello superiore? È ruotato in modo che non sembri largo quanto il rettangolo sopra perché viene ruotato di 60 gradi.

 -ms-transform: rotateY(60deg); /* IE 9 */ -webkit-transform: rotateY(60deg); /* Safari */ transform: rotateY(60deg);

ruotaZ()

Il metodo rotateZ() ruota un elemento attorno al suo asse z di un grado specificato. In questo caso, il valore è 120 gradi.

 -ms-transform: rotateZ(120deg); /* IE 9 */ -webkit-transform: rotateZ(120deg); /* Safari */ transform: rotateZ(120deg);

ruota3d()

La funzione rotate3d(1, -1, 1, 45deg) ruota l'immagine lungo l'asse y di un angolo di 45 gradi. È importante notare che è possibile utilizzare valori negativi per ruotare l'elemento nella direzione opposta.

Poiché questo è più complesso delle specifiche del singolo asse, rotate3d può essere suddivisa in questo modo: rotate3d(x,y,z,angle) dove x=1, y=-1, z=1 e l'angolo di rotazione = 45 gradi .

Il codice per dare uno stile a questo è simile a:

 -ms-transform: rotate3d(1, -1, 1, 45deg); /* IE 9 */ -webkit-transform: rotate3d(1, -1, 1, 45deg); /* Safari */ transform: rotate3d(1, -1, 1, 45deg);

Testare le basi

In senso orario lungo l'asse x di 45 gradi.

 transform: rotate3d(1, 0, 0, 45deg);

In senso orario lungo l'asse y di 45 gradi.

 transform: rotate3d(0, 1, 0, 45deg);

In senso orario lungo l'asse z di 45 gradi.

 transform: rotate3d(0, 0, 1, 45deg);

Vale la pena ricordare che, a seconda dei valori specificati, a volte non si noterà una rotazione; per esempio, questo non sarebbe evidente: transform: rotate3d(0, 0, 0, 50deg);

Prospettiva

Questa è probabilmente la trasformazione più “dimensionale”. È qui che acquisirai letteralmente prospettiva. Se applichi trasformazioni 3D a un elemento senza impostare la prospettiva, l'effetto risultante non apparirà tridimensionale. Questo è qualcosa che potrebbe essere aggiunto anche alle proprietà di cui sopra.

Per attivare lo spazio 3D, un elemento ha bisogno di prospettiva. Questo può essere applicato in due modi: usando la proprietà transform o la proprietà perspective .

La proprietà transform sarebbe simile a questa: transform: perspective(600px); e la proprietà della prospettiva sarebbe simile a questa: perspective: 600px; .

I seguenti esempi lo cambieranno tra i due, quindi assicurati di guardare attentamente il codice.

Il valore della perspective determina l'intensità dell'effetto 3D. Pensa a un valore basso come se fosse davvero notevole, come ci si sente quando si guarda un oggetto di grandi dimensioni. Quando c'è un valore maggiore, l'effetto è meno intenso.

Anche la posizione del punto di fuga può essere personalizzata. Vale la pena menzionarlo e molta sperimentazione, poiché è rilevante per la prospettiva CSS. Per impostazione predefinita, il punto di fuga per uno spazio 3D è posizionato al centro. Utilizzare la proprietà prospect-origin per modificare la posizione del punto di fuga. Sembrerebbe qualcosa del tipo: perspective-origin: 15% 55% .

Scala

scalaZ()

Questo definisce una trasformazione di scala 3D fornendo un valore per l'asse z. Poiché si ridimensiona solo lungo l'asse z, sono necessarie altre funzioni per dimostrare l'effetto di ridimensionamento. Guarda come il rettangolo è rivolto verso lo spettatore e come mostra davvero la prospettiva?

Per comprendere appieno la scala (Z), gioca con il valore e vedrai la prospettiva diventare "più nitida" con i valori più grandi.

scala3d(x,y,z)

La funzione scale3d() modifica la dimensione di un elemento ed è scritta come scale(x, y, z) . Come scaleZ , non è evidente l'aspetto completo della prospettiva a meno che non venga utilizzata con perspective .

Questo esempio usa questo:

 -ms-transform: perspective(500px) scale3d(0.8, 2, 0.2); /* IE 9 */ -webkit-transform: perspective(500px) scale3d(0.8, 2, 0.2); /* Safari */ transform: perspective(500px) scale3d(0.8, 2, 0.2);

Una breve nota: se tutte e tre le coordinate del vettore sono uguali, il ridimensionamento è uniforme e non ci saranno differenze evidenti.

 transform: scale3d(1, 1, 1); /* unchanged */ transform: scale3d(2, 2, 2); /* twice the original size */

Matrice3d()

La matrice 2D può assumere sei valori, mentre la matrice 3D ne prende 16 (una matrice 4×4)! Sarebbe un post molto lungo se tutti i dettagli fossero coperti, quindi se vuoi esplorare di più questo concetto, consiglio vivamente questo esperimento interattivo Matrix3D su Codepen.

Ecco lo schema matrix3d(a, b, 0, 0, c, d, 0, 0, 0, 0, 1, 0, tx, ty, 0, 1)

Come creare
Animazioni con trasformazioni 3D

Ora che le nozioni di base sono coperte, la creazione di animazioni interattive è il passaggio successivo. Usando trasformazioni e transizioni CSS3, gli elementi cambiano da uno stato all'altro ruotando, ridimensionando o aggiungendo prospettiva.

Se non conosci le animazioni CSS, è importante sapere che senza una transizione, un elemento trasformato cambierebbe bruscamente da uno stato all'altro. Per evitare ciò, è possibile aggiungere una transizione in modo da poter controllare la modifica, conferendole un aspetto più uniforme.

Come creare un giro di carte

A chi non piace giocare a carte? Questo esempio presenta una carta a doppia faccia e puoi vedere entrambi i lati girandola con una trasformazione. Se dai un'occhiata al tag body , gran parte dell'effetto deriva dalla proprietà della perspective . È impostato su 500px. Un valore inferiore come 100px sembra molto "distorto".

Ecco l'HTML di partenza:

 <div class="wrapper"> div class="side-one"></div> <div class="side-two"></div> </div>

Il CSS è ciò che lo fa accadere:

 body { -webkit-perspective: 500px; perspective: 500px; } .wrapper { -webkit-transition: all 1s ease-in; transition: all 1s ease-in; -webkit-transform-style: preserve-3d; transform-style: preserve-3d; position: relative; margin: 100px auto; width: 250px; height: 250px; cursor: pointer; } .wrapper div { position: absolute; -webkit-backface-visibility: hidden; backface-visibility: hidden; width: 100%; height: 100%; border-radius: 10px; background-position: 50% 50%; background-size: 150px; background-repeat: no-repeat; box-shadow: inset 0 0 45px rgba(255,255,255,.3), 0 12px 20px -10px rgba(0,0,0,.4); color: #FFF; text-align: center; text-shadow: 0 1px rgba(0,0,0,.3); } .side-one { z-index: 400; background: #50c6db url(image.png); } .side-two { -webkit-transform: rotateY(-180deg); transform: rotateY(-180deg); background: #ef4e65 url(image.png); } .wrapper:hover { -webkit-transform: rotateY(-1turn); transform: rotateY(-1turn); }

Questo può essere trovato su Codepen.

Se non conosci le trasformazioni, questo potrebbe sembrarti interessante: transform: rotate(1turn); Questa unità è perfetta per la nostra carta perché un'unità di "giro" è esattamente quello che sembra, ovvero un cerchio completo.

Ho anche usato un po' di facilitazione per creare un modo personalizzato di girare. Ciò si ottiene con transition: all 1s ease-in; .

Un'altra proprietà 3D nello snippet è transform-style: preserve-3d; . Includendolo, consente all'elemento di "oscillare" nello spazio tridimensionale anziché rimanere con l'elemento genitore.

Come creare testo con un effetto 3D

Questo esempio è stato ispirato da un vecchio poster di un film. Ci sono così tanti caratteri tipografici diversi là fuori che possono utilizzare un ottimo stile CSS, quindi sono sicuramente possibili effetti di tipo unici. Questo testo utilizza rotate3d e transform3d per dargli una trasformazione unica.

L'HTML è piuttosto semplice:

 <div class="container"> <div class="text-wrapper"> <div class="text">New York City</div> </div> </div>

Ecco il CSS di base:

 .container{ -webkit-perspective: 600; } .text { transform: rotate3d(2, 2, .5, 22deg)translate3d(100px, 0px, 0px); }

CSS ed esempi più dettagliati possono essere trovati su Codepen.

Speriamo che le trasformazioni CSS 3D portino una nuova dimensione ai tuoi progetti. L'utilizzo della prospettiva è un ottimo modo per rendere gli elementi più dimensionali. In combinazione con le transizioni, ci sono molte possibilità durante la creazione di animazioni.