I CSS3 (Cascading Style Sheets versione 3) hanno introdotto la proprietà transform e, come relativo valore, alcune funzioni che consentono la trasformazione degli elementi a cui vengono applicate, ottenendo così degli effetti visivi che fino ad oggi avrebbero richiesto l’utilizzo di Flash o di Javascript.

Questa funzioni sono quattro: scale(), rotate(), skew() e translate().

I relativi esempi applicati ad un’immagine si trovano in questa pagina.
A ciascuna immagine, identificata tramite id, è stato applicato un collegamento ipertestuale (con href=”#” per attivare l’hyperlink senza dovere specificare una destinazione), dopo di che è stata applicata la proprietà transform alla pseudoclasse dinamica :hover (vedi più sotto per esaminare il codice).

Si osservi che l’effetto ottenuto con la trasformazione non influenza in alcun modo gli altri elementi della pagina, il cui posizionamento resta invariato.

scale()

La funzione scale() permette di ridimensionare l’elemento a cui è applicata la proprietà transform sulla base di un fattore di scala numerico: 1 equivale al 100% della dimensione originale, quindi un numero >1 determina un ingrandimento e un numero <1 determina un rimpicciolimento: ad es., 1.2 indica un aumento delle dimensioni del 20%.

Se viene specificato un solo fattore, questo viene applicato sia orizzontalmente sia verticalmente; ne possono essere indicati due diversi, in tal caso il primo sarà il fattore di scala orizzontale ed il secondo quello verticale.

Nell’esempio pubblicato, il codice CSS è il seguente:

a:hover img#foto1 {
transform: scale(1.1);
}

che comporta un ingradimento del 10% su entrambi gli assi, come è logico che sia per evitare una distorsione dell’immagine.

rotate()

La funzione rotate() consente di ruotare in senso orario o antiorario l’elemento a cui è applicata la proprietà transform sulla base del numero di gradi specificato nel valore della funzione stessa: i valori da 1deg a 360deg provocano una rotazione in senso orario, quelli da -1deg a -360deg in senso antiorario.

Nell’esempio pubblicato, il codice CSS è il seguente:

a:hover img#foto2 {
transform: rotate(20deg);
}

che comporta una rotazione in senso orario di 20°.

skew()

La funzione skew() determina una deformazione dell’elemento a cui è applicata la proprietà transform sulla base del numero di gradi specificato nel valore, o nei valori, della funzione stessa: il primo valore indica la deformazione orizzontale, il secondo la deformazione verticale. Se viene indicato un valore solo, la deformazione avverrà solo orizzontalmente.

Nell’esempio pubblicato, il codice CSS è il seguente:

a:hover img#foto3 {
transform: skew(10deg,15deg);
}

che genera una deformazione diversa sui due assi.

translate()

La funzione translate(),  infine, provoca una traslazione (spostamento) dell’elemento a cui è applicata la proprietà transform sulla base di due valori: il primo indica lo spostamento sull’asse orizzontale (per valori positivi, verso destra), il secondo indica lo spostamento sull’asse verticale (per valori positivi, verso il basso).
Se viene indicato un valore solo, lo spostamento avviene solo in orizzontale.
I valori possono essere espressi in px, em, % e così via.

Nell’esempio pubblicato, il codice CSS è il seguente:

a:hover img#foto4 {
transform: translate(10px,5px);
}

che causa una traslazione di 10px sull’asse orizzontale (verso destra) e di 5 px su quello verticale (verso il basso).

Se avessimo messo i seguenti valori negativi:

a:hover img#foto4 {
transform: translate(-10px,-5px);
}

lo spostamento avrebbe avuto luogo verso sinistra di 10px e verso l’alto di 5px.

Note

Sintassi

Occorre innanzitutto fare attenzione ad alcune particolarità sintattiche della proprietà transform e dei relativi valori/funzioni.
Le parentesi che racchiudono il valore/i valori non devono essere precedute da uno spazio.
Se sono specificati due valori, devono essere separati da una virgola e non da uno spazio.
Ovviamente in caso di sintassi errata l’effetto non si presenterebbe, il che suggerirebbe appunto qualche tipo di errore.

Prefissi

Le trasformazioni non sono supportate dai vecchi browser, in particolare da IE8 e precedenti.
Per garantire una migliore compatibilità con i diversi browser nelle loro successive versioni, può ancora essere preferibile anteporre alla proprietà transform i prefissi che specificano il “motore” di ciascuno di essi, vale a dire:

-ms-transform (per IE9 – indispensabile)
-moz-transform (per Firefox e gli altri browser basati su Mozilla)
-webkit-transform (per Safari e Google Chrome, basati su Webkit)
-o-transform (per Opera)

per cui il codice CSS dei quattro esempi di cui sopra diventerebbe:

a:hover img#foto1 {
-ms-transform: scale(1.1);
-moz-transform: scale(1.1);
-webkit-transform: scale(1.1);
-o-transform: scale(1.1);
transform: scale(1.1);
}
a:hover img#foto2 {
-ms-transform: rotate(20deg);
-moz-transform: rotate(20deg);
-webkit-transform: rotate(20deg);
-o-transform: rotate(20deg);
transform: rotate(20deg);
}
a:hover img#foto3 {
-ms-transform: skew(10deg,15deg);
-moz-transform: skew(10deg,15deg);
-webkit-transform: skew(10deg,15deg);
-o-transform: skew(10deg,15deg);
transform: skew(10deg,15deg);
}
a:hover img#foto4 {
-ms-transform: translate(10px,5px);
-moz-transform: translate(10px,5px);
-webkit-transform: translate(10px,5px);
-o-transform: translate(10px,5px);
transform: translate(10px,5px);
}

Trasformazioni multiple

E’ possibile applicare trasformazioni multiple allo stesso elemento.
Sarà sufficiente indicarle una di seguito all’altra nella stessa dichiarazione, come nell’ultimo esempio mostrato:

a:hover img#foto5 {
-ms-transform: scale(0.8) translate(-10px,5px);
-moz-transform: scale(0.8) translate(-10px,5px);
-webkit-transform: scale(0.8) translate(-10px,5px);
-o-transform: scale(0.8) translate(-10px,5px);
transform: scale(0.8) translate(-10px,5px);
}

transform-origin

Normalmente, le trasformazioni hanno luogo partendo dal riferimento costituito dal centro dell’elemento a cui si applicano (in questo senso, differiscono da altre proprietà quali quelle di posizionamento come top, right ecc. che fanno invece riferimento all’angolo superiore sinistro).
E’ però possibile cambiare questo riferimento tramite la proprietà transform-origin che ammette due valori: il primo indica la nuova posizione di riferimento lungo l’asse orizzontale, il secondo lungo l’asse verticale.
I valori ammessi possono essere espressi tramite le diverse unità di misura (px, em, % …) o tramite le parole (top, right, bottom, center).

Per esempio, per fare riferimento all’angolo superiore sinistro dell’elemento, specifichiamo nei CSS nella stessa regola che contiene la trasformazione:

a:hover img#foto6 {
-ms-transform-origin: 0 0;
-moz-transform-origin: 0 0;
-webkit-transform-origin: 0 0;
-o-transform-origin: 0 0;
transform-origin: 0 0;

-ms-transform: scale(1.1);
-moz-transform: scale(1.1);
-webkit-transform: scale(1.1);
-o-transform: scale(1.1);
transform: scale(1.1);
}

Si confronti la trasformazione dell’immagine numero 6 con la numero 1 in cui,  a parità di trasformazione, il punto di origine non è stato modificato.

Avvertenze

Le trasformazioni descritte sopra consentono di ottenere degli effetti gradevoli.
Si veda, a mero titolo di esempio pratico, questa pagina: http://www.chesspro.it/scacchi-sport-e-natura-2014/galleria-2013.php con la trasformazione scale() applicata alle miniature di immagini nella galleria fotografica.
Inoltre, qualora l’utente impieghi un browser che non supporta questa proprietà, la fruizione dei contenuti resta assicurata: a venire meno è solamente un effetto visivo.
Un’avvertenza che si può tuttavia dare è quella di non eccedere nell’impiego delle trasformazioni che, a lungo andare, potrebbero risultare fastidiose.

Bibliografia

“CSS Guida completa”, Gianluca Troiani – terza edizione, Capitolo 12 (pagg. 251-259)

Questo argomento è trattato nei corsi di web design organizzati da INSTANT WEBSITES, studio freelance di web design con sede a Vigevano (Pavia).
Per maggiori dettagli, consultare le pagine: http://www.corsidiwebdesignavigevano.it/corsi-di-web-design.php, http://www.corsiwebdesign.it/index.php e http://www.instantwebsites.it/corsi.html
Possono essere organizzati corsi individuali e di gruppo anche con programma personalizzabile.
Contattateci per maggiori informazioni.