Ruotare immagini attraverso i CSS e JQuery

3 Lug

Out Of Date Warning

Questo post è stato pubblicato più di 2 anni fa (il 3 luglio 2011). Le idee vanno avanti velocemente, le prospettive cambiano quindi i contenuti potrebbero non essere aggiornati. Ti prego di tenere in considerazione questo, e di verificare le informazioni tecniche presenti nell'articolo prima di farne affidamento per i tuoi scopi.

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:

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°):

  • chrome -webkit-transform: rotate(90deg)
  • Safari -webkit-transform: rotate(90deg)
  • firefox -moz-transform: rotate(90deg) /*(dalla versione 3.5)*/
  • Opera -o-transform: rotate(90deg) /*(dalla versione 10.50)*/
  • Internet Explorer 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)

Javascript (JQuery)

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

Live demo

Live Demo

Risorse

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

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

Un Commento su “Ruotare immagini attraverso i CSS e JQuery”

  1. Andrea 18 dicembre 2014 at 22:54 #

    Grazie mille ottima guida!

Lascia un commento