Le trasformazioni 2D in CSS permettono di applicare effetti visivi agli elementi HTML, come spostamenti, rotazioni, zoom e inclinazioni. In questa lezione, vediamo come funziona la proprietà transform in CSS e le funzioni da utilizzare.
La proprietà transform accetta i seguenti metodi:
translate(): sposta un elemento lungo gli assi X e Y.rotate(): ruota un elemento attorno al suo centro.scale(): ridimensiona un elemento lungo gli assi X e Y.skew(): inclina un elemento lungo gli assi X e Y.matrix(): combina più trasformazioni in una singola funzione.Il metodo translate() sposta un elemento lungo l'asse orizzontale (X) e/o l'asse verticale (Y).
La sintassi di translate() è: transform: translate(asseX, asseY). L'asseX sposta l'elemento in orizzontale, l'asseY sposta l'elemento in verticale. Il valore dell'asseY non è obbligatorio. Se non inserito, l'elemento verrà spostato soltanto sull'asse X. Sia asseX che asseY possono essere valori positivi o negativi.
div {
transform: translate(90px, 30px);
background-color: lightblue;
width: 100px;
height: 100px;
}Nell'esempio, il <div> viene traslato di 90px verso destra e 30px verso il basso. Considera, però, che questo spostamento non altera la posizione dell'elemento nella struttura del documento, ma solo la sua posizione visiva. Quindi, se c'è un altro elemento nella posizione in cui viene traslato, il <div> andrà sopra di esso.
Se vogliamo spostare un elemento solo in una particolare direzione, possiamo usare i metodi translateX() e translateY(). La loro sintassi è: transform: translateX(asseX) e transform: translate(asseY).
Questi sotto-metodi funzionano allo stesso modo di translate().
Ecco un esempio di translateX(), dove l'elemento viene spostato di 90px verso destra:
div {
transform: translateX(90px);
}Ecco un esempio di translateY(), dove l'elemento viene spostato di 30px verso il basso:
div {
transform: translateY(30px);
}Il metodo rotate() ruota un elemento di un certo angolo, specificato in gradi (deg), attorno al suo centro.
La sintassi di rotate() è: transform: rotate(valore). Il valore deve essere in deg, che indica i gradi della rotazione. Un valore positivo ruota l'elemento in senso orario, mentre un valore negativo lo ruota in senso antiorario.
div {
transform: rotate(20deg);
background-color: lightcoral;
width: 100px;
height: 100px;
}Nell'esempio, il <div> è stato ruotato di 20 gradi.
I metodi rotateX(), rotateY() e rotateZ() permettono di trasformare l'elemento in 3D, deformandolo in base all'asse di riferimento.
In questa lezione, trattiamo soltanto le trasformazioni 2D. Parleremo dei vari metodi di rotate() nella prossima lezione.
Il metodo scale() ridimensiona un elemento lungo gli assi X e Y, ingrandendo o rimpicciolendo l'elemento (e gli elementi all'interno) del valore indicato.
La sintassi di scale() è: transform: scale(valoreX, valoreY) oppure transform: scale(valoreXY). Ecco come funzionano i parametri:
div {
transform: scale(1.5, 0.5);
background-color: lightgreen;
width: 100px;
height: 100px;
}Nell'esempio, il <div> viene ingrandito del 50% (1.5) sull'asse orizzontale, rimpicciolito del 50% (0.5) sull'asse verticale. La scritta all'intero viene deformata.
I metodi scaleX() e scaleY() permettono di ingrandire o rimpicciolire un elemento sull'asse X o sull'asse Y. La loro sintassi è: transform: scaleX(asseX) e transform: scaleY(asseY).
Questi sotto-metodi funzionano allo stesso modo di scale().
Ecco un esempio di scaleX(), dove l'elemento viene rimpicciolito dell'80% sull'asse X (e rimane il 20%):
div {
transform: scaleX(20%);
}Ecco un esempio di scaleY(), dove l'elemento viene ingrandito di 2 volte sull'asse Y:
div {
transform: scaleY(2);
}Il metodo skew() inclina un elemento lungo l'asse X e/o Y. L'inclinazione viene specificata in gradi (deg).
La sintassi è: transform: skew(angoloX, angoloY). L'angoloX rappresenta l'angolo da usare per distorcere l'elemento lungo l'asse X, mentre l'angoloY rappresenta l'angolo da usare per distorcere l'elemento lungo l'asse Y. Entrambi i valori devono essere seguiti da deg. L'angoloY non è obbligatorio. Sia l'angoloX che l'angoloY possono avere valore positivo o negativo.
div {
transform: skew(15deg, 15deg);
background-color: LightGoldenrodYellow;
width: 100px;
height: 100px;
}Nell'esempio, abbiamo inclinato l'elemento di 15 gradi sull'asse X e 15 gradi sull'asse Y.
I metodi skewX() e skewY() permettono di inclinare l'elemento in una specifica asse, X o Y. La loro sintassi è: transform: skewX(angoloX) e transform: skewY(angoloY).
Questi sotto-metodi funzionano allo stesso modo di skew().
Ecco un esempio di skewX(), dove l'elemento viene inclinato di 15 in senso antiorario sull'asse X:
div {
transform: skewX(-15deg);
}Ecco un esempio di skewY(), dove l'elemento viene inclinato di 25 in senso orario sull'asse Y:
div {
transform: skewY(25deg);
}Il metodo matrix() raccoglie tutte le funzioni di transform in un singolo valore.
La sintassi è: transform: matrix(scaleX, skewY, skewX, scaleY, translateX, translateY). Ognuno dei parametri di matrix() rappresenta le funzioni che abbiamo visto finora. Nessuno dei parametri richiede un'unità di misura.
div {
transform: matrix(1, 0.5, -0.5, 1, 50, 20);
background-color: lightpink;
width: 100px;
height: 100px;
}Nell'esempio, il <div> ha i seguenti valori di transform:
1 e 1: indicano che non c'è ingrandimento lungo gli assi X e Y.0.5 e -0.5: rappresentano gli effetti di inclinazione lungo gli assi X e Y.50 e 20: indicano la traslazione dell'elemento di 50px a destra e 20px verso il basso.È possibile inserire più funzioni contemporaneamente in transform separandole con lo spazio. Non esiste un ordine obbligatorio.
Ad esempio, ruotiamo e trasliamo l'elemento:
div {
transform: rotate(20deg) translate(20px, 30px);
background-color: lightpink;
width: 100px;
height: 100px;
}