Pubblicato il 14/07/12e aggiornato il

Come inserire delle immagini che ruotano al passaggio del mouse.

Come inserire nel blog delle immagini che compiono delle rotazioni di angolo predeterminato 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 ( # ).




11 commenti :

  1. bellissimo effetto,complimenti.
    provato funziona perfettamente.

    RispondiElimina
  2. si possono far ruotare anche le immagini del widget degli ultimi articoli? http://www.ideepercomputeredinternet.com/2012/03/widget-degli-ultimi-post-con-miniature.html

    RispondiElimina
  3. funziona solo con il metodo :hover o si riesce a far funzionare anche senza?

    RispondiElimina
  4. @TopReader
    Questo effetto funziona con le immagini Con i widget bisognerebbe riprogettarli dall'inizio e non è detto che sia possibile

    @Igor...
    Per inserire delle transizioni ci deve essere un evento provocato dal cursore. Però i CSS3 sono molto vasti e in continuo sviluppo...

    RispondiElimina
  5. salve posso inserire questo in wordpress?se si come posso fare?

    RispondiElimina
    Risposte
    1. Apri l'Editor di Wordpress. Vai su HTML e incolli il codice di questo post dove al posto di URL_IMMAGINE ci metti l'indirizzo della foto che puoi caricare su Media del sito oppure su Picasa, Dropbox o altro.
      P.S. Questo vale per i siti self-hosted vale a dire con homepage www.esempio.com mentre non so se funzionerà nei siti gratuiti di Wordress del tipo esempio.wordpress.com
      @#

      Elimina
  6. Complimenti per il lavoro. Vorrei mettere l'effetto sulle immagine dei social network nel mio sito wordpress. quale parte va nel css e quale nella pagina footer.php?Grazie

    RispondiElimina
    Risposte
    1. Nel CSS ci va la parte da < style > a < / style > mentre il resto è HTML
      @#

      Elimina
  7. Risposte
    1. Che ti devo dire ... Prova a incollare questo codice

      <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="http://goo.gl/EhudgF"> <img class="rotazione" src="https://lh4.googleusercontent.com/-UYRwgsmtMyA/T_P4lPh0fNI/AAAAAAAAY7A/itM815cE_iY/s800/uccello-paradiso.jpg" width="200"/> </a>

      e incollalo in questo Editor Online

      http://htmledit.squarefree.com/

      e vedrai che il codice funziona.
      @#

      Elimina

Non inserire link cliccabili altrimenti il commento verrà eliminato. Metti la spunta a Inviami notifiche per essere avvertito via email di nuovi commenti. Se ti ho aiutato con il post o con le risposte ai commenti condividi su Facebook o su Twitter. Grazie.