CSS3 3D Transforms
CSS3 consente di formattare gli elementi utilizzando trasformazioni 3D.
Mouse sopra gli elementi di seguito per vedere la differenza tra un 2D e una trasformazione 3D:
Supporto browser per trasformazioni 3D
I numeri nella tabella indicano la prima versione del browser che supporta pienamente la proprietà.
Numeri seguiti da -webkit-, -moz- , o -o- specificare la prima versione che ha lavorato con un prefisso.
| Proprietà | |||||
|---|---|---|---|---|---|
| transform | 36.0 12.0 -webkit- |
10.0 | 16.0 10.0 -moz- |
4.0 -webkit- | 23.0 15.0 -webkit- |
| transform-origin (three-value syntax) |
36.0 12.0 -webkit- |
10.0 | 16.0 10.0 -moz- |
4.0 -webkit- | 23.0 15.0 -webkit- |
| transform-style | 36.0 12.0 -webkit- |
11.0 | 16.0 10.0 -moz- |
4.0 -webkit- | 23.0 15.0 -webkit- |
| perspective | 36.0 12.0 -webkit- |
10.0 | 16.0 10.0 -moz- |
4.0 -webkit- | 23.0 15.0 -webkit- |
| perspective-origin | 36.0 12.0 -webkit- |
10.0 | 16.0 10.0 -moz- |
4.0 -webkit- | 23.0 15.0 -webkit- |
| backface-visibility | 36.0 12.0 -webkit- |
10.0 | 16.0 10.0 -moz- |
4.0 -webkit- | 23.0 15.0 -webkit- |
CSS3 3D Transforms
In questo capitolo si apprenderanno i seguenti metodi di trasformazione 3D:
-
rotateX() -
rotateY() -
rotateZ()
Il rotateX() Metodo
Il rotateX() Metodo ruota un elemento intorno al suo asse X in un dato grado:
Esempio
div
{
-webkit-transform: rotateX(150deg); /* Safari */
transform: rotateX(150deg);
}
Prova tu stesso " Il rotateY() Metodo
Il rotateY() metodo di rotazione di un elemento attorno al proprio asse Y in un dato grado:
Esempio
div
{
-webkit-transform: rotateY(130deg); /* Safari */
transform: rotateY(130deg);
}
Prova tu stesso " Il rotateZ() Metodo
Il rotateZ() metodo di rotazione di un elemento attorno al proprio asse Z in un dato grado:
Esempio
div
{
-webkit-transform: rotateZ(90deg); /* Safari */
transform: rotateZ(90deg);
}
Prova tu stesso " Mettiti alla prova con esercizi!
Esercizio 1 » Esercizio 2» Esercizio 3 »
CSS3 Transform Properties
La seguente tabella elenca tutte le Trasformazione 3D proprietà:
| Proprietà | Descrizione |
|---|---|
| transform | Si applica una trasformazione 2D o 3D a un elemento |
| transform-origin | Consente di modificare la posizione su elementi trasformati |
| transform-style | Specifica come elementi nidificati sono resi nello spazio 3D |
| perspective | Specifica il punto di vista su come gli elementi 3D sono visti |
| perspective-origin | Specifica la posizione inferiore di elementi 3D |
| backface-visibility | Definisce se un elemento deve essere visibile quando non è rivolto verso lo schermo |
3D Transform Metodi
| Funzione | Descrizione |
|---|---|
| matrix3d (n,n,n,n,n,n,n,n,n,n,n,n,n,n,n,n) | Definisce una trasformazione 3D, utilizzando una matrice 4x4 di 16 valori |
| translate3d(x,y,z) | Definisce la traduzione 3D |
| translateX(x) | Definisce traduzione 3D, utilizzando solo il valore per l'asse X |
| translateY(y) | Definisce traduzione 3D, utilizzando solo il valore per l'asse Y |
| translateZ(z) | Definisce traduzione 3D, utilizzando solo il valore per l'asse Z |
| scale3d(x,y,z) | Definisce una trasformazione in scala 3D |
| scaleX(x) | Definisce una trasformazione scala 3D dando un valore per l'asse X |
| scaleY(y) | Definisce una trasformazione scala 3D dando un valore per l'asse Y |
| scaleZ(z) | Definisce una trasformazione scala 3D dando 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 in prospettiva di un elemento 3D trasformato |