La proprietà transform consente di traslare, ruotare, inclinare o scalare oggetti presenti nelle pagine web, ciò avviene modificando attraverso tale proprietà le coordinate dell'oggetto stesso, il sistema si coordinate si basa su un asse X che si estende orizzontalmente vesro destra e un asse Y che si estende verticalmente verso il basso.
Come nella figura:
La proprietà transform si suddivide in due tipi:
- transform che specifica il tipo di trasformazione da effettuare;
- transform-origin che specifica il punto di partenza della trasformazione.
I tipi di trasformazione messi a disposizione sono:
1. rotate, ruota l'oggetto di un certo numero di gradi specificati, come ad esempio:
transform:rotate (40deg);
ruota l'oggetto di 40 gradi;
2. traslate, sposta l'oggetto di una misura specificata in px sia sull'asse X che sull'asse Y, se viene specificata una sola misura questa viene applicata solo all'asse X poichè quella sull'asse Y è di default uguale a 0, per specificare su quale asse si applica lo spostamento si usano traslateX e traslateY, se vengono specificati due valori questi corrispondono rispettivamente nell'ordine all'asse X e all'asse Y, cioè:
transform:traslate (10px, 20px);
è uguale a
transform:traslateX (10px);
transform:traslateY (20px);
3. scale, ridimensione (scala) l'oggetto in base ai valori assegnati, se viene dato un solo valore questo viene applicato ad entrambi gli assi di ugual misura, se il valore è maggiore di 1 la dimensione dell'oggetto verrà ingrandita mentre, se il valore è compreso tra 0 e 1 la dimensione verrà ridotta, come per traslate si usano anche in questo caso scaleX e scaleY e valgono le stesse considerazioni fatte in precedenza.
4. skew, inclina l'oggetto di un certo numero di gradi assegnati, il primo si applica all'asse X il secondo all'asse Y:
transform: skew (15deg, 20deg);
in questo caso si inclina l'oggetto di 15 gradi sull'asse X e 20 gradi sull'asse Y, anche per questa funzione valgono skewX e skewY.
La proprietà trasfom-origin come già detto specifica il punto (cioè le coordinate x e y) dal quale deve aver inizio la trasformazione, se queste coordinate non vengono specificate queste di default corrispondono al centro dell'oggetto, le coordinate possono essere espresse in px, ems, etc...oppure attraverso le keyword left, center, right per l'asse X e top, center, bottom per l'asse Y, nel caso in cui si scelga l'ultima modalità e venga omesso uno dei due valori, esso di default corrisponderà a center.
Ecco un esempio di questa funzione:
Codice CSS
.class
{
transform:rotate (40deg);
transform-origin: left bottom;
}cioè si ruota l'oggetto di 40 gradi nel punto di x=0 e y corrispondente al vertice basso di sinistra dell'oggetto.
Come per la maggior parte delle proprietà CSS anche in questo caso si usano i prefissi per renderla compatibile con i browser.
Faccio qualche esempio pratico:
Codice CSS
div{
.........
.........
.........
transition-property: all;
transition-duration: 1s;
-webkit-transition-property: all;
-webkit-transition-duration: 1s;
-o-transition-property: all;
-o-transition-duration: 1s;
-moz-transition-property: all;
-moz-transition-duration: 1s;
}
div:hover {
transform: translate(60px, 0px);
-ms-transform: translate(60px, 0px);
-moz-transform: translate(60px, 0px);
-webkit-transform: translate(60px, 0px);
-o-transform: translate(60px, 0px);
}in questo esempio il contenitore div subisce uno spostamento verso l'alto (60px) durante la fase di hover per poi ritornare nella posizione originaria, la proprietà transition ne stabilisce la durata (1s).