Il modulo CSS 2D Transforms incluso nella specifica CSS3 ci consente di effettuare delle trasformazioni su un oggetto presente nella pagina.
Le trasformazioni possono anche essere combinate tra loro possiamo quindi ruotare, scalare, inclinare e capovolgere un elemento.
Le proprietà necessarie sono:
| transform | dove specifichiamo quali "trasformazioni" applicare (rotate, scale ecc.) |
| transform-origin | dove definiamo l'origine ovvero il punto di partenza da dove iniziare la trasformazione (top left, top right ecc.) |
h1 {
transform: rotate(45deg);
transform-origin: left bottom;
}
Così come avveniva per le transizioni al fine di una corretta lettura da parte della maggior parte dei browser in circolazione è opportuno scrivere le regole con i seguenti suffissi:
h1 {
transform: rotate(45deg);
transform-origin: left bottom;
/* Internet Explorer */
-ms-transform: rotate(45deg);
-ms-transform-origin: left bottom;
/* FireFox */
-moz-transform: rotate(45deg);
-moz-transform-origin: left bottom;
/* Safari e Chrome */
-webkit-transform: rotate(45deg);
-webkit-transform-origin: left bottom;
/* Opera */
-o-transform: rotate(45deg);
-o-transform-origin: left bottom;
}
Nella seguente tabelle elenchiamo tutte le funzioni di trasformazioni possibili:
| matrix | trasformazione in forma di matrice SVG |
| translate | traslare l’oggetto in base al valore indicato |
| translatex translaty | traslazione su unico asse specifico |
| scale | ridimensionare l’oggetto in base ai valori indicati |
| scalex scaley | ridimensione su unico asse specifico |
| rotate | ruotare l’oggetto in base al numero di gradi indicati |
| skew | distorce l’oggetto per un valore pari al numero di gradi indicati |
| skewx skewy | distorsione su unico asse specifico |
La funzione consente di traslare l’oggetto in base al valore indicato. E' possibile indicare uno o due valori che sono rispettivamente l’asse X e l’asse Y.
Se il secondo parametro non viene dichiarato, la traslazione sull’asse Y assume valore zero.
.classe {
transform: translate(10px, 10px);
}
Praticamente identiche alla funzione precedente con la sola differenza che prendono in ingresso un unico parametro.
.classe {
transform: translatex(10px);
}
Con la funzione scale è possibile ridimensionare l’elemento in base ai valori impostati;
Indicando un solo parametro, questo sarà assegnato ad entrambi gli assi.
Valori > di 1 - l'elemento sarà ingrandito
Valori < di 1 & > 0 - l'elemento sarà rimpicciolito
.classe {
transform: scale(1.5);
}
Queste funzioni consentono, come per la funzione translate, di ridimensionare l’oggetto solo su uno degli assi
.classe {
transform: scalex(0.2);
}
La funzione rotate consente di ruotare l’elemento in base al numero di gradi indicati (deg)
.classe {
transform: rotate(45deg);
}
La funzione distorce l’elemento per un valore pari al numero di gradi indicati.
Se indichiamo due parametri l’inclinazione verrà effettuata su entrambi gli assi, altrimenti solo sull’asse X.
.classe {
transform: skew(45deg, 15deg);
}
Come per le funzioni precedenti, anche in questo caso entrambe si riferiscono all’inclinazione di uno solo degli assi.
.classe {
transform: skewy(45deg);
}
La funzione matrix permette non solo di scalare e spostare un elemento, ma anche di inclinarlo dinamicamente.
.classe {
transform: matrix(1, 0, 0, 1, 0, 0);
}
A = scala/ridimensiona orizzontalmente
B = distorce/inclina verticalmente
C = distorce/inclina orizzontalmente
D = scala/ridimensiona verticalmente
E = sposta/trasla orizzontalmente
F = sposta/trasla verticalmente
E' possibile assegnare una lista di funzioni di trasformazioni ad un elemento.
Questa la sintassi da utilizzare:
h1 {
transform: rotate(180deg) skew(20deg, 30deg) scale(2);
}