Come inserire delle immagini che ruotano al passaggio del mouse.

Mediante l'utilizzo del linguaggio CSS3 e della proprietà Rotate è possibile visualizzare una immagine che ruota di un certo numero di gradi debitamente impostati. Tale proprietà fa parte delle cosiddette 2D Transforms insieme alle altre Translate, Scale, Skew e Matrix.

Con Translate si può spostare un elemento in un altro punto della pagina intesa come fosse un sistema di riferimento cartesiano e impostando quindi i valori di X e Y. Con Scale si modificano le dimensioni delle immagini rispettivamente in larghezza e altezza. Con Skew si possono effettuare modifiche più articolate per esempio impostando una rotazione di 20 gradi sull'asse X e di 15 gradi sull'asse Y. Infine Matrix combina tutte le altre trasformazioni in una soltanto. Occorre inserire sei parametri di funzioni matematiche che permettono di ruotare, ridimensionare e spostare i vari elementi.

Il concetto è quello di creare una classe di stile per poi riprenderla in un div a cui si possa applicare questo effetto. Come è noto questa nuova tecnologia non è molto supportata da Internet Explorer sperando che la nuova versione IE10 possa colmare la lacuna. L'immagine sottostante ruoterà di 360 gradi quando sarà puntata con il mouse e la transizione durerà un secondo (non con il browser IE)

Il codice che è stato inserito nel post, ovviamente in Modalità HTML, è il seguente

<style>
.rotazione {
-webkit-transition-duration: 1s;
-moz-transition-duration: 1s;
-o-transition-duration: 1s;
transition-duration: 1s;
-webkit-transition-property: -webkit-transform;
-moz-transition-property: -moz-transform;
-o-transition-property: -o-transform;
transition-property: transform;
overflow:hidden;
}
.rotazione:hover {
-webkit-transform:rotate(360deg);
-moz-transform:rotate(360deg);
-o-transform:rotate(360deg);
}
</style>
<a href="#"> <img class="rotazione" src="URL_IMMAGINE" width="200"/> </a>

dove i parametri in rosso possono essere personalizzati e dove può essere inserito anche un collegamento al posto del cancelletto ( # ).