- Blog
- Programmazione
- CSS
- CSS3 - Avanzato - Trasformazioni 3D
CSS3 - Avanzato - Trasformazioni 3D
- Programmazione
- CSS
- Giuseppe Ventura
- 28/10/2023
I CSS supportano anche le trasformazioni 3D.
In questo articolo impareremo a conoscere la seguente proprietà CSS:
transform
Metodi di trasformazione 3D CSS
Con la proprietà di transform CSS puoi utilizzare i seguenti metodi di trasformazione 3D:
rotateX()rotateY()rotateZ()
Il metodo rotateX()
Il metodo rotateX() ruota un elemento attorno al suo asse X ad un dato grado:
#myDiv {
transform: rotateX(150deg);
}
Il metodo rotateY()
Il metodo rotateY() ruota un elemento attorno al suo asse Y ad un dato grado:
#myDiv {
transform: rotateY(150deg);
}
Il metodo rotateZ()
Il metodo rotateZ() ruota un elemento attorno al suo asse Z ad un dato grado:
#myDiv {
transform: rotateZ(90deg);
}
Proprietà di trasformazione CSS
La tabella seguente elenca tutte le proprietà di trasformazione 3D:
| Proprietà | Descrizione |
|---|---|
| transform | Applica una trasformazione 2D o 3D a un elemento |
| transform-origin | Consente di modificare la posizione sugli elementi trasformati |
| transform-style | Specifica la modalità di rendering degli elementi nidificati nello spazio 3D |
| perspective | Specifica la prospettiva su come vengono visualizzati gli elementi 3D |
| perspective-origin | Specifica la posizione inferiore degli elementi 3D |
| backface-visibility | Definisce se un elemento deve essere visibile o meno quando non è rivolto verso lo schermo |
Metodi di trasformazione 3D CSS
| Funzione | Descrizione |
|---|---|
| matrix3d(n,n,n,n,n,n,n,n,n,n,n,n,n,n,n,n) | Si definisce una trasformazione 3D, utilizzando una matrice 4x4 di 16 valori |
| translate3d(x,y,z) | Definisce una traduzione 3D |
| translateX(x) | Definisce una traslazione 3D, utilizzando solo il valore per l'asse X |
| translateY(y) | Definisce una traslazione 3D, utilizzando solo il valore per l'asse Y |
| translateZ(z) | Definisce una traslazione 3D, utilizzando solo il valore per l'asse Z |
| scale3d(x,y,z) | Definisce una trasformazione in scala 3D |
| scaleX(x) | Definisce una trasformazione in scala 3D fornendo un valore per l'asse X |
| scaleY(y) | Definisce una trasformazione in scala 3D fornendo un valore per l'asse Y |
| scaleZ(z) | Definisce una trasformazione in scala 3D fornendo un valore per l'asse Z |
| rotate3d(x,y,z,angle) | Definisce una rotazione 3D |
| rotateX(angle) | Definisce una rotazione 3D lungo l'asse X |
| rotateY(angle) | Definisce una rotazione 3D lungo l'asse Y |
| rotateZ(angle) | Definisce una rotazione 3D lungo l'asse Z |
| perspective(n) | Definisce una vista prospettica per un elemento trasformato 3D |