Trasformazioni 2D CSS
- Pagina precedente Caratteri web CSS
- Pagina successiva Trasformazioni 3D CSS
Trasformazioni 2D CSS
Le trasformazioni CSS (transforms) ti permettono di muovere, ruotare, ingrandire e inclinare gli elementi.
Posiziona il mouse sull'elemento seguente per vedere le trasformazioni 2D:
In questa sezione, imparerai le seguenti proprietà CSS:
transform
Supporto del browser
I numeri nella tabella indicano la versione del browser che supporta completamente l'attributo.
| Proprietà | Chrome | IE | Firefox | Safari | Opera |
|---|---|---|---|---|---|
| transform | 36.0 | 10.0 | 16.0 | 9.0 | 23.0 |
Metodi di trasformazione 2D CSS
Utilizzando CSS transform Proprietà, puoi utilizzare i seguenti metodi di trasformazione 2D:
translate()rotate()scaleX()scaleY()scale()skewX()skewY()skew()matrix()
Suggerimento:Apprenderai le trasformazioni 3D nel capitolo successivo.
Metodo translate()
translate() Il metodo sposta l'elemento dalla sua posizione corrente (in base ai parametri specificati per l'asse X e Y).
Esempio seguente sposta l'elemento <div> di 50 pixel a destra e 100 pixel in basso dalla sua posizione corrente:
Esempio
div {
transform: translate(50px, 100px);
}
Metodo rotate()
rotate() Il metodo ruota l'elemento in senso orario o antiorario in base all'angolo fornito.
Esempio seguente ruota l'elemento <div> di 20 gradi in senso orario:
Esempio
div {
transform: rotate(20deg);
}
Utilizzare valori negativi per ruotare l'elemento in senso antiorario.
Esempio seguente ruota l'elemento <div> di 20 gradi in senso antiorario:
Esempio
div {
transform: rotate(-20deg);
}
Metodo scale()
scale() Metodo per aumentare o ridurre la dimensione dell'elemento (in base ai parametri di larghezza e altezza forniti).
Esempio seguente ingrandisce l'elemento <div> a due volte la sua larghezza e a tre volte la sua altezza originali:
Esempio
div {
transform: scale(2, 3);
}
Esempio seguente riduce l'elemento <div> alla metà della sua larghezza e altezza originali:
Esempio
div {
transform: scale(0.5, 0.5);
}
Metodo scaleX()
scaleX() Metodo per aumentare o ridurre la larghezza dell'elemento.
Esempio seguente ingrandisce l'elemento <div> a due volte la sua larghezza originale:
Esempio
div {
transform: scaleX(2);
}
Esempio seguente riduce l'elemento <div> alla metà della sua larghezza originale:
Esempio
div {
transform: scaleX(0.5);
}
Metodo scaleY()
scaleY() Il metodo aumenta o riduce l'altezza dell'elemento.
L'esempio seguente ingrandisce l'elemento <div> a tre volte la sua altezza originale:
Esempio
div {
transform: scaleY(3);
}
L'esempio seguente riduce l'elemento <div> a metà della sua altezza originale:
Esempio
div {
transform: scaleY(0.5);
}
Metodo skewX()
skewX() Il metodo inclina l'elemento lungo l'asse X di un angolo specificato.
L'esempio seguente inclina l'elemento <div> di 20 gradi lungo l'asse X:
Esempio
div {
transform: skewX(20deg);
}
Metodo skewY()
skewY() Il metodo inclina l'elemento lungo l'asse Y di un angolo specificato.
L'esempio seguente inclina l'elemento <div> di 20 gradi lungo l'asse Y:
Esempio
div {
transform: skewY(20deg);
}
Metodo skew()
skew() Il metodo inclina l'elemento lungo gli assi X e Y di un angolo specificato.
L'esempio seguente inclina l'elemento <div> di 20 gradi lungo l'asse X e di 10 gradi lungo l'asse Y:
Esempio
div {
transform: skew(20deg, 10deg);
}
Se il secondo parametro non è specificato, il valore è zero. Pertanto, l'esempio seguente inclina l'elemento <div> di 20 gradi lungo l'asse X:
Esempio
div {
transform: skew(20deg);
}
Metodo matrix()
matrix() Il metodo combina tutti i metodi di trasformazione 2D in uno solo.
matrix() Il metodo accetta sei parametri, inclusi funzioni matematiche, che ti permettono di ruotare, scalare, muovere (traslare) e inclinare l'elemento.
I parametri sono i seguenti: matrix(scaleX(),skewY(),skewX(),scaleY(),translateX(),translateY())
Esempio
div {
transform: matrix(1, -0.3, 0, 1, 0, 0);
}
Proprietà di trasformazione CSS
La tabella seguente elenca tutte le proprietà di trasformazione 2D:
| Proprietà | Descrizione |
|---|---|
| transform | Applica una trasformazione 2D o 3D all'elemento. |
| transform-origin | Permettono di modificare la posizione dell'elemento trasformato. |
Metodi di trasformazione 2D CSS
| Funzione | Descrizione |
|---|---|
| matrix(n,n,n,n,n,n) | Definisci la trasformazione 2D utilizzando una matrice di sei valori. |
| translate(x,y) | Definisci la trasformazione 2D, muovi l'elemento lungo gli assi X e Y. |
| translateX(n) | Definisci la trasformazione 2D, muovi l'elemento lungo l'asse X. |
| translateY(n) | Definisci la trasformazione 2D, muovi l'elemento lungo l'asse Y. |
| scale(x,y) | Definire la trasformazione di scala 2D, modificando la larghezza e l'altezza dell'elemento. |
| scaleX(n) | Definire la trasformazione di scala 2D, modificando la larghezza dell'elemento. |
| scaleY(n) | Definire la trasformazione di scala 2D, modificando l'altezza dell'elemento. |
| rotate(angle) | Definire la rotazione 2D, specificando l'angolo nei parametri. |
| skew(x-angle,y-angle) | Definire la trasformazione di inclinazione 2D lungo gli assi X e Y. |
| skewX(angle) | Definire la trasformazione di inclinazione 2D lungo l'asse X. |
| skewY(angle) | Definire la trasformazione di inclinazione 2D lungo l'asse Y. |
- Pagina precedente Caratteri web CSS
- Pagina successiva Trasformazioni 3D CSS
