In questo articolo vediamo come ottenere rotazioni compatibili con la maggior parte dei browser, su questa pagina è presente una demo della soluzione proposta.

Rotazione con CSS3

Grazie alla proprietà transform che si occupa delle trasformazioni bidimensionali è possibile definire rotazioni customizzate per i vari elementi della pagina.

transform: rotate(7.5deg)

La sintassi è molto semplice:

proprietà: funzione(valore)

come eneunciato nelle specifiche di trasformazione bisimensionale dei CSS3 presenti sul sito del W3C.

Ampliare il supporto ai vari browser

Per ampliare il supporto di questa proprietà è possibile utilizzare la stessa sintassi ma dedicata ai singoli browser/motori di rendering.

transform: rotate(7.5deg);
/*generica*/
-webkit-transform: rotate(7.5deg);
/* CHROME/SAFARI*/
-moz-transform: rotate(7.5deg);
/* FIREFOX/MOZILLA */
-o-transform: rotate(7.5deg);
/* OPERA */
-ms-transform: rotate(7.5deg);
/* IE 9 */

Ampliare il supporto a Internet Explorer precendenti al 9

Come notiamo manca un supporto per Internet Explorer precedenti alla versione 9, per colmare questa lacuna è possibile utilizzare due filter predisposti da Microsoft a questo scopo: Basic Image e Matrix.

Basic Image

Con il filter Basic Image è possibile definire 3 tipi di rotazione per un elemento: 90°,180° e 270° settando la proprietà rotation rispettivamente a 1, 2 o 3.

filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=0);/*ie5.5/7*/
-ms-filter: 'progid:DXImageTransform.Microsoft.BasicImage(rotation=0)';/*ie8*/
/* nessuna rotazione*/
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=1);/*ie5.5/7*/
-ms-filter: 'progid:DXImageTransform.Microsoft.BasicImage(rotation=1)';/*ie8*/
/* rotazione di 90°*/
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=2);/*ie5.5/7*/
-ms-filter: 'progid:DXImageTransform.Microsoft.BasicImage(rotation=2)';/*ie8*/
/* rotazione di 180°*/
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);/*ie5.5/7*/
-ms-filter: 'progid:DXImageTransform.Microsoft.BasicImage(rotation=3)';/*ie8*/
/* rotazione di 270°*/

Matrix

Il limite della poprietà Basic Image è rappresentato dal fatto di offrire solo 3 tipi di rotazione e nessun tipo di rotazione custom. Per ottenere un maggiore controllo è allora possibile utilizzare il filter Matrix, che si occupa della trasformazione bidimensionale di un elemento (come la proprietà transform dei css3).

filter: progid:DXImageTransform.Microsoft.Matrix(
       M11=0.9914448613738104,
       M12=-0.13052619222005157,
       M21=0.13052619222005157,
       M22=0.9914448613738104, sizingMethod='auto expand');
       zoom: 1;   /* IE 5.5-7*/
-ms-filter: 'progid:DXImageTransform.Microsoft.Matrix(
       M11=0.9914448613738104,
       M12=-0.13052619222005157,
       M21=0.13052619222005157,
       M22=0.9914448613738104, sizingMethod='auto expand');
       zoom: 1'; /* IE8 */
       /*rotazione di 7.5 gradi*/

Il filter Matrix si occupa di ridefinire l’elemento in base ai 4 angoli dell’elemento, per calcolare questi 4 punti è necessaria un po’ di matematica per disporre correttamente le coordinate, nello specifico i 4 valori inseriti (m11,m12,m21,m22) saranno uguali alle seguenti formule.

m11 = cos((gradi)*3,14159265*2/360)
m12 = -sen((gradi)*3,14159265*2/360)
m21 = sen((gradi)*3,14159265*2/360)
m22 = cos((gradi)*3,14159265*2/360)

La proprietà sizingMethod definisce invece se l’elemento contenitore dovrà adattarsi o meno all’immagine generata grazie al valore “auto expand”.

Su questa pagina è possibile vedere una demo della soluzione proposta.