CSS3 Trasformazioni 2D

Le funzioni di trasformazione 2D del CSS3 permettono di trasformare gli elementi nello spazio 2D.

Trasformazione 2D dell'elemento

Utilizzando le funzioni di trasformazione 2D del CSS3, è possibile eseguire operazioni di trasformazione di base sugli elementi in uno spazio bidimensionale, come spostamento, rotazione, scalatura e inclinazione.

Gli elementi trasformati non influenzano gli elementi circostanti, ma possono essere sovrapposti come gli elementi posizionati in modo assoluto. Tuttavia, gli elementi trasformati continuano a occupare spazio nella disposizione di base (non trasformati).

Utilizzo delle trasformazioni CSS e delle funzioni di trasformazione

L'attributo transform del CSS3 utilizza le funzioni di trasformazione per manipolare il sistema di coordinate utilizzato dagli elementi, al fine di applicare gli effetti di trasformazione.

La seguente sezione descrive queste funzioni di trasformazione:

Funzione translate()

Sposta l'elemento dal suo posizionamento corrente a una nuova posizione lungo gli assi X e Y. Può essere espresso come translate(tx, ty). Se ty non è specificato, viene assunto che il suo valore sia zero.

img {
　　　　-webkit-transform: translate(200px, 50px); /* Chrome, Safari, Opera */
　　　　　　　-moz-transform: translate(200px, 50px); /* Firefox */
　　　　　　　　-ms-transform: translate(200px, 50px); /* IE 9 */
　　　　　　　　　　　　transform: translate(200px, 50px);　　　　　　
}

La funzione translate(200px, 50px) sposta l'immagine di 200 pixel verso destra lungo l'asse x e di 50 pixel verso l'alto lungo l'asse y.

Funzione rotate()

La funzione rotate() ruota l'elemento attorno al suo origine (specificato dall'attributo transform-origin) di un angolo specificato. Può essere scritta come rotate(a).

img {
　　　　-webkit-transform: rotate(30deg); /* Chrome, Safari, Opera */
　　　　　　　-moz-transform: rotate(30deg); /* Firefox */
　　　　　　　　-ms-transform: rotate(30deg); /* IE 9 */
　　　　　　　　　　　　transform: rotate(30deg);　　　　　　
}

La funzione rotate(30deg) ruota l'immagine di 30 gradi in senso orario rispetto al suo origine. Puoi anche usare valori negativi per ruotare l'elemento in senso antiorario.

Funzione scale()

La funzione scale() aumenta o riduce le dimensioni dell'elemento. Può essere scritta come scale(sx, sy). Se sy non è specificato, si assume che sia uguale a sx.

img {
　　　　-webkit-transform: skew(1.5); /* Chrome, Safari, Opera */
　　　　　　　-moz-transform: skew(1.5); /* Firefox */
　　　　　　　　-ms-transform: skew(1.5); /* IE 9 */
　　　　　　　　　　　　transform: skew(1.5); /* Browser moderni */　　　　
}

La funzione scale(1.5) riduce o ingrandisce le dimensioni dell'immagine moltiplicando la larghezza e l'altezza per 1.5 rispetto alla dimensione originale. La funzione scale(1) o scale(1, 1) non ha alcun effetto sull'elemento.

Funzione skew()

La funzione skew() fa inclinare l'elemento lungo l'asse X e Y di un angolo specificato. Può essere scritta come skew(ax, ay). Se ay non è specificato, si assume che il suo valore sia zero.

img {
　　　　-webkit-transform: skew(-40deg, 15deg); /* Chrome, Safari, Opera */
　　　　　　　-moz-transform: skew(-40deg, 15deg); /* Firefox */
　　　　　　　　-ms-transform: skew(-40deg, 15deg); /* IE 9 */
　　　　　　　　　　　　transform: skew(-40deg, 15deg); /* Browser moderni */　　　　
}

La funzione skew(-40deg, 15deg) fa inclinare l'elemento lungo l'asse x di -40 gradi e lungo l'asse y di 15 gradi.

funzione matrice()

La funzione matrice() può eseguire tutte le trasformazioni 2D contemporaneamente, come trascinamento, rotazione, scala e inclinazione. AdottaMatricei sei parametri possono essere scritti nella forma matrice(a, b, c, d, e, f). La prossima sezione ti mostrerà come usarli per rappresentare ogni funzione di trasformazione 2D matrice().

• translate(tx, ty) = matrice(1, 0, 0, 1, tx, ty); – dove tx e ty sono valori di trascinamento orizzontale e verticale.

• rotate(a) = matrice(cos(a), sin(a), -sin(a), cos(a), 0, 0); – dove a è in gradi. Puoi scambiare i valori sin(a) e -sin(a) per invertire la rotazione. La rotazione massima che puoi eseguire è di 360 gradi.

• scale(sx, sy) = matrice(sx, 0, 0, sy, 0, 0); – dove sx e sy sono valori di scala orizzontale e verticale.

• skew(ax, ay) = matrice(1, tang(ay), tang(ay), 1, 0, 0); – dove ax e ay sono valori orizzontali e verticali in gradi.

Questo è un esempio di esecuzione di trasformazioni 2D utilizzando la funzione matrix().

img {
　　　　-webkit-transform: matrice(0, -1, 1, 0, 200px, 50px); /* Chrome, Safari, Opera */
　　　　　　　-moz-transform: matrice(0, -1, 1, 0, 200px, 50px); /* Firefox */
　　　　　　　　-ms-transform: matrice(0, -1, 1, 0, 200px, 50px); /* IE 9 */
　　　　　　　　　　　　transform: matrice(0, -1, 1, 0, 200px, 50px);　　
}

Ma quando si eseguono più trasformazioni contemporaneamente, è più conveniente utilizzare una funzione di trasformazione singola e elencarle in ordine, come segue:

img {
　　　　-webkit-transform: trasformare(200px, 50px) ruotare(180deg) scalare(1.5) inclinare(0, 30deg); /* Chrome, Safari, Opera */
　　　　　　　-moz-transform: trasformare(200px, 50px) ruotare(180deg) scalare(1.5) inclinare(0, 30deg); /* Firefox */
　　　　　　　　-ms-transform:　translate(200px,　50px)　rotate(180deg)　scale(1.5)　skew(0,　30deg);　　/*　IE　9　*/
　　　　　　　　　　　　transform:　translate(200px,　50px)　rotate(180deg)　scale(1.5)　skew(0,　30deg);　　　　　　
}

Funzioni di trasformazione 2D

La tabella seguente riassume brevemente tutte le funzioni di trasformazione 2D.