Ruotare immagini attraverso i CSS e JQuery

Lo sapevate che è possibile ruotare le immagini (e gli altri elementi HTML) attraverso i CSS? Questo è possibile con il modulo Transforms incluso nella specifica del CSS3. Per la verità attraverso tale proprietà non è solo possibile ruotare un elemento ma possiamo eseguire altre manipolazioni 2D come traslare, inclinare o scalare gli elementi. Ma tornando alla rotazione, ecco la sintassi:

.ruota {
  transform: rotate(40deg) ;
}

Il valore rappresenta l’angolo di rotazione e di default è 0

Cross-browser

Per quanto riguarda Webkit, Firefox ed Opera la rotazione la andremo ad ottenere attraverso la proprietà transform, naturalmente ognuno con il relativo prefisso.

Per Internet Explorer come al solito la procedura è diversa; dobbiamo utilizzare i filtri ed in particolare il filtro BasicImage. Il filtro BasicImage accetta 4 valori: 0, 1, 2 o 3 rispettivamente per una rotazione di 0, 90, 180, o 270 gradi.

Quindi ricapitolando (es. rorazione di 90°):

• -webkit-transform: rotate(90deg)
• -webkit-transform: rotate(90deg)
• -moz-transform: rotate(90deg) /*(dalla versione 3.5)*/
• -o-transform: rotate(90deg) /*(dalla versione 10.50)*/
• filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=1);

La tecnica

Dopo questo prologo veniamo ora al verso scopo dell’articolo, abbiamo visto come attraverso i CSS possiamo ruotare l’immagine, vediamo ora come farlo al click del mouse attraverso JQuery

L’effetto che voglio ottenere è che ad ogni click del mouse sull’immagine questa ruoti di 90 gradi in senso orario. Dato che (come abbiamo visto) il supporto dei vari browser al modulo Transforms è dato a proprio modo (prefissi) oppure non è dato proprio (vedi Internet Explorer) ci conviene andare a definire 4 classi di stile, e quindi cambiare all’evento click la classe anzichè i valori delle proprietà.

CSS

Definisco le quattro classi, una per ogni angolo di rotazione (0, 90, 180 e 270 gradi)

.ruota0 {
    transform: rotate(0deg);		 /* standard */
    -webkit-transform: rotate(0deg); 	 /* Chrome - Safari */
    -moz-transform: rotate(0deg);	 /* Firefox */
    -o-transform: rotate(0deg);		 /* Opera */
    filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=0);	 /* IE */
  }
.ruota90 {
    transform: rotate(90deg);
    -webkit-transform: rotate(90deg);
    -moz-transform: rotate(90deg);
    -o-transform: rotate(90deg);
    filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=1);
  }
.ruota180 {
    transform: rotate(180deg);
    -webkit-transform: rotate(180deg);
    -moz-transform: rotate(180deg);
    -o-transform: rotate(180deg);
    filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=2);
  }
.ruota270 {
    transform: rotate(270deg);
    -webkit-transform: rotate(270deg);
    -moz-transform: rotate(270deg);
    -o-transform: rotate(270deg);
    filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
  }

Javascript (JQuery)

Questa è la parte javascript in cui ad ogni click vado a cambiare la classe di stile sull’elemento immagine.

  $(document).ready( function() {
    rotazione_img = 0
    $('#mia-immagine').click( function() {
      rotazione_img += 90
      $(this).attr('class', 'ruota' + rotazione_img % 360 )
    })
  })

Live demo

Risorse

http://www.w3.org/TR/css3-2d-transforms/

http://msdn.microsoft.com/en-us/library/ms532972(VS.85).aspx