Le trasformazioni 3D in CSS permettono di manipolare graficamente gli elementi HTML nello spazio tridimensionale, aggiungendo prospettiva e effetti alla pagina web. Le trasformazioni 3D sono possibili con la proprietà CSS transform.
In questa lezione, vediamo come utilizzare le 3 funzioni per le trasformazioni 3D:
translate3d()rotate3d()scale3d()Tutte queste 3 funzioni sono estensioni delle loro "controparti" 2D (ovvero translate(), rotate(), scale()) che abbiamo visto nella lezione sulle trasformazioni 2D.
La funzione translate3d() sposta un elemento lungo i tre assi: X (orizzontale), Y (verticale), e Z (in profondità).
La sintassi è: transform: translate3d(asseX, asseY, asseZ). Tutti i parametri devono avere l'unità di misura e possono essere sia positivi che negativi.
div {
transform: translate3d(50px, 30px, 20px);
background-color: lightblue;
width: 100px;
height: 100px;
}Nell'esempio, il <div> è stato traslato di 50px verso destra, 30px verso il basso e 20px sull'asse Z. Per questo motivo, apparirebbe allo stesso modo usando translate(50px, 30px).
La funzione rotate3d() ruota un elemento nel piano tridimensionale definito dai valori di X, Y e Z.
La sintassi è: transform: rotate3d(asseX, asseY, asseZ, gradi). AsseX, asseY e asseZ rappresentano l'asse di rotazione. Per ognuno, 1 significa che la rotazione si verifica in quell'asse e 0 significa che non c'è rotazione in quell'asse. Possono essere valori positivi o negativi. I gradi rappresentano i gradi della rotazione: un valore positivo indica una rotazione orario, un valore negativo indica una rotazione antioraria.
div {
transform: rotate3d(1, 1, 0, 45deg);
background-color: lightcoral;
width: 100px;
height: 100px;
}In questo esempio, l'elemento viene ruotato di 45 gradi attorno a un asse di rotazione che si estende lungo gli assi X e Y.
I metodi rotateX(), rotateY() e rotateZ() permettono di trasformare l'elemento in 3D, deformandolo in base all'asse di riferimento.
La loro sintassi è: transform: rotateX(gradi), transform: rotateY(gradi) e transform: rotateZ(gradi). I gradi devono essere scritti in deg.
div {
transform: rotateX(30deg) rotateY(30deg) rotate(15deg);
background-color: lightcoral;
width: 100px;
height: 100px;
}Nell'esempio, il <div> è stato ruotato di 30 gradi sull'asse X, 30 gradi sull'asse Y e 15 gradi sull'asse Z. Come abbiamo visto nella lezione delle trasformazioni 2D, transform può avere più funzioni insieme come parametri.
La funzione scale3d() ridimensiona un elemento lungo i tre assi X, Y e Z, ingrandendolo o rimpicciolendolo.
La sintassi è: transform: scale3d(asseX, asseY, asseZ). I valori dei parametri devono essere privi di unità di misura oppure in percentuale. I valori dei parametri possono essere positivi o negativi.
div {
transform: scale3d(1.5, 0.5, 1.2);
background-color: lightcoral;
width: 100px;
height: 100px;
}In questo esempio, l'elemento viene ridimensionato di 1.5 volte lungo l'asse X, di 0.5 volte lungo l'asse Y (rendendolo più stretto), e di 1.2 volte lungo l'asse Z.