CSS3 Transforms
trasforma CSS3 permette di tradurre, ruotare, scalare e inclinare gli elementi.
Una trasformazione è un effetto che permette un cambiamento di forma elemento, dimensione e posizione.
CSS3 supporta le trasformazioni 2D e 3D.
Mouse sopra gli elementi di seguito per vedere la differenza tra un 2D e una trasformazione 3D:
Supporto browser per trasformazioni 2D
I numeri nella tabella indicano la prima versione del browser che supporta pienamente la proprietà.
Numeri seguiti da -ms-, -webkit-, -moz- , o -o- specify la prima versione che ha lavorato con un prefisso.
| Proprietà | |||||
|---|---|---|---|---|---|
| transform | 36.0 4.0 -webkit- | 10.0 9.0 -ms- | 16.0 3.5 -moz- | 3.2 -webkit- | 23.0 15.0 -webkit- 12.1 10.5 -o- |
| transform-origin (two-value syntax) | 36.0 4.0 -webkit- | 10.0 9.0 -ms- | 16.0 3.5 -moz- | 3.2 -webkit- | 23.0 15.0 -webkit- 12.1 10.5 -o- |
Trasformazioni 2D CSS3
In questo capitolo si apprenderanno i seguenti metodi di trasformazione 2D:
-
translate() -
rotate() -
scale() -
skewX() -
skewY() -
matrix()
 | Suggerimento: Imparerai a conoscere le trasformazioni 3D nel prossimo capitolo. |
|---|
La translate() Metodo
La translate() metodo sposta un elemento dalla posizione attuale (secondo i parametri indicati per l'asse X e l'asse Y).
L'esempio seguente sposta l' <div> elemento 50 pixel a destra, e 100 pixel verso il basso dalla sua posizione attuale:
Esempio
div
{
-ms-transform: translate(50px,100px); /* IE 9 */
-webkit-transform: translate(50px,100px); /* Safari */
transform: translate(50px,100px);
}
Prova tu stesso " La rotate() Metodo
Il rotate() Metodo ruota un elemento in senso orario o antiorario secondo un determinato grado.
L'esempio seguente ruota il <div> elemento in senso orario con 20 gradi:
Esempio
div
{
-ms-transform: rotate(20deg); /* IE 9 */
-webkit-transform: rotate(20deg); /* Safari */
transform: rotate(20deg);
}
Prova tu stesso " Usando valori negativi ruota l'elemento in senso antiorario.
L'esempio seguente ruota il <div> elemento in senso antiorario con 20 gradi:
Esempio
div
{
-ms-transform: rotate(-20deg); /* IE 9 */
-webkit-transform: rotate(-20deg); /* Safari */
transform: rotate(-20deg);
}
Prova tu stesso " La scale() Metodo
Le scale() metodo aumenta o diminuisce la dimensione di un elemento (secondo i parametri indicati per la larghezza e altezza).
L'esempio seguente aumenta la <div> elemento ad essere due volte della sua larghezza originale, e tre volte della sua altezza originaria:
Esempio
div
{
-ms-transform: scale(2,3); /* IE 9 */
-webkit-transform: scale(2,3); /* Safari */
transform: scale(2,3);
}
Prova tu stesso " Il seguente esempio diminuisce il <div> elemento per essere metà della sua larghezza e l'altezza originale:
Esempio
div
{
-ms-transform: scale(0.5,0.5); /* IE 9 */
-webkit-transform: scale(0.5,0.5); /* Safari */
transform: scale(0.5,0.5);
}
Prova tu stesso " Il skewX() Metodo
Il skewX() metodo inclina un elemento lungo l'asse X l'angolo determinato.
L'esempio seguente distorce il <div> elemento di 20 gradi lungo l'asse X:
Esempio
div
{
-ms-transform: skewX(20deg); /* IE 9 */
-webkit-transform: skewX(20deg); /* Safari */
transform: skewX(20deg);
}
Prova tu stesso " Il skewY() Metodo
Il skewY() metodo inclina un elemento lungo l'asse Y dall'angolo determinato.
L'esempio seguente distorce il <div> elemento di 20 gradi lungo l'asse Y:
Esempio
div
{
-ms-transform: skewY(20deg); /* IE 9 */
-webkit-transform: skewY(20deg); /* Safari */
transform: skewY(20deg);
}
Prova tu stesso " Il skew() Metodo
Il skew() metodo inclina un elemento lungo X e Y dagli angoli indicati.
L'esempio seguente distorce il <div> elemento di 20 gradi lungo l'asse X, e 10 gradi lungo l'asse Y:
Esempio
div
{
-ms-transform: skew(20deg, 10deg); /* IE 9 */
-webkit-transform: skew(20deg, 10deg); /* Safari */
transform: skew(20deg, 10deg);
}
Prova tu stesso " Se il secondo parametro non è specificato, ha un valore di zero. Così, il seguente esempio distorce il <div> elemento di 20 gradi lungo l'asse X:
Esempio
div
{
-ms-transform: skew(20deg); /* IE 9 */
-webkit-transform: skew(20deg); /* Safari */
transform: skew(20deg);
}
Prova tu stesso " La matrix() Metodo
La matrix() metodo combina tutti i 2D trasformare metodi in uno.
La matrix() metodo di prendere sei parametri, che contiene le funzioni matematiche, che consente di ruotare, scalare, spostare (tradurre), e l'inclinazione elementi.
I parametri sono i seguenti: matrix(scaleX(),skewY(),skewX(),scaleY(),translateX(),translateY()) :
Esempio
div
{
-ms-transform: matrix(1, -0.3, 0, 1, 0, 0); /* IE 9 */
-webkit-transform: matrix(1, -0.3, 0, 1, 0, 0); /* Safari */
transform: matrix(1, -0.3, 0, 1, 0, 0);
}
Prova tu stesso " Mettiti alla prova con esercizi!
Esercizio 1 » Esercizio 2» Esercizio 3 » Esercizio 4»
CSS3 Transform Properties
La seguente tabella elenca tutte le 2D trasformano proprietà:
| Proprietà | Descrizione |
|---|---|
| transform | Si applica una trasformazione 2D o 3D a un elemento |
| transform-origin | Consente di modificare la posizione su elementi trasformati |
2D Transform Metodi
| Funzione | Descrizione |
|---|---|
| matrix(n,n,n,n,n,n) | Definisce una trasformazione 2D, utilizzando una matrice di sei valori |
| translate(x,y) | Definisce traduzione 2D, muovere l'elemento lungo l'asse X e l'asse Y |
| translateX(n) | Definisce traduzione 2D, muovere l'elemento lungo l'asse X |
| translateY(n) | Definisce traduzione 2D, muovere l'elemento lungo l'asse Y |
| scale(x,y) | Definisce una trasformazione in scala 2D, cambiando larghezza e l'altezza degli elementi |
| scaleX(n) | Definisce una trasformazione in scala 2D, cambiando la larghezza dell'elemento |
| scaleY(n) | Definisce una trasformazione in scala 2D, cambiando l'altezza dell'elemento |
| rotate(angle) | Definisce una rotazione 2D, l'angolo viene specificato nel parametro |
| skew(x-angle,y-angle) | Definisce un un'inclinazione 2D lungo l'asse X e l'asse Y |
| skewX(angle) | Definisce un un'inclinazione 2D lungo l'asse X |
| skewY(angle) | Definisce un un'inclinazione 2D lungo l'asse Y |