Come creare progetti 3D con la proprietà di trasformazione 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 è utile iniziare con gli elementi costitutivi di base. Alcuni di questi concetti sembreranno familiari, ma la "z" è qualcosa che apparirà nuovo quando si lavora in 3D. Le trasformazioni 3D estendono le trasformazioni CSS 2D per includere l'asse z, consentendo trasformazioni 3D di elementi DOM.

Qual è l'asse z?

Ci saranno molti riferimenti all'asse z. È facile pensarla 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 trasformazioni 3D

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

Tradurre

tradurreZ()

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

In questo esempio, translateZ(-20px) sposta l'elemento a 20 pixel di distanza dal visualizzatore.

Ecco il frammento di codice per creare questo esempio:

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

tradurre3d()

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 muove in ciascuna 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 c'è una sovrapposizione del secondo quadrato in corso. Potrebbe non sembrare drammatico come previsto, ma l'aggiunta della proprietà della prospettiva (più avanti in questo tutorial) aiuterà.

La proprietà prospettiva è stata aggiunta a questo esempio.

Ruotare

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

ruotareX()

I valori dei pixel non funzioneranno qui, devono essere in gradi. Il metodo rotateX() ruota un elemento attorno al suo asse x di un determinato grado. Vedi come è più corto il rettangolo? 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);

ruotareY()

Il metodo rotateY() ruota un elemento attorno al suo asse y. Nota come il rettangolo inferiore non è largo quanto quello superiore? Viene 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);

ruotareZ()

Il metodo rotateZ() ruota un elemento attorno al proprio 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);

ruotare3d()

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

Poiché questo è più complesso delle specifiche dell'asse singolo, rotate3d può essere scomposto 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 modellare 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; ad esempio, questo non sarebbe evidente: transform: rotate3d(0, 0, 0, 50deg);

Prospettiva

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

Come utilizzare le transizioni e le trasformazioni CSS3 per creare animazioni

È possibile creare animazioni interessanti con CSS3 utilizzando trasformazioni e transizioni. Le trasformazioni vengono utilizzate per modificare un elemento da uno stato all'altro. Esempi potrebbero essere la rotazione, lo spostamento, l'inclinazione...

Per attivare lo spazio 3D, un elemento ha bisogno della prospettiva. Questo può essere applicato in due modi: usando la proprietà di transform o la proprietà di 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 da vicino il codice.

Il valore della perspective determina l'intensità dell'effetto 3D. Pensa a un valore basso come davvero notevole, come 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. Merita una menzione 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à di origine prospettiva per modificare la posizione del punto di fuga. Sembrerebbe qualcosa del tipo: perspective-origin: 15% 55% .

L'esempio a sinistra è stato impostato su circa 800px. La prospettiva sul lato destro è molto più drastica, è stata impostata su 200px.

Scala

scalaZ()

Questo definisce una trasformazione in 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. Vedi 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.

L'esempio a sinistra ha un valore di 2 e l'esempio a destra ha un valore di 8.

scale3d(x,y,z)

La funzione scale3d() cambia la dimensione di un elemento ed è scritta come scale(x, y, z) . Come scaleZ , non è evidente che aspetto abbia la prospettiva a meno che non venga utilizzata con la 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 */

Matrix3d()

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 matrix3d ​​interattivo su Codepen.

Ecco lo schema di base per la matrice3d: 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 basi sono state coperte, la creazione di animazioni interattive è il passaggio successivo. Utilizzando le trasformazioni e le 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, dandogli un aspetto più fluido.

Come creare un flip card

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 più basso 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à "turno" è esattamente quello che sembra, che è un cerchio completo.

Ho anche usato un po' di allentamento 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; . Includendo questo, consente all'elemento di "oscillare" nello spazio tridimensionale piuttosto che rimanere con l'elemento genitore.

Come creare testo con 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 usa 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.

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