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>
.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 ( # ).
bellissimo effetto,complimenti.
RispondiEliminaprovato funziona perfettamente.
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
RispondiEliminaQuesto commento è stato eliminato dall'autore.
RispondiElimina@TopReader
RispondiEliminaQuesto 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...
COMPLIMENTI !!! GRAZIE
RispondiEliminasalve posso inserire questo in wordpress?se si come posso fare?
RispondiEliminaApri 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.
EliminaP.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
@#
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
RispondiEliminaNel CSS ci va la parte da < style > a < / style > mentre il resto è HTML
Elimina@#
Non mi funziona
RispondiEliminaChe ti devo dire ... Prova a incollare questo codice
Elimina<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.
@#
Molto carino, complimenti
RispondiElimina