Bellissimo effetto di rotazione per le immagini.

Come mostrare delle immagini che ruotano al passaggio del mouse e che da quadrate diventano circolari.

Con il CSS3 è possibile creare effetti straordinari da postare in una qualsiasi pagina web quale quello del testo in 3 dimensioni o quello che serve per la realizzazione di un bottone con font originali. È anche possibile realizzare un Effetto Zoom al passaggio del cursore.  

Le trasformazioni di maggior impatto riguardano le immagini che possono essere fatte ruotare al passaggio del cursore oppure che ruotano quando ci si clicca sopra. Le immagini quadrate possono infine essere rese circolari e anche fatte ruotare. 

Con questo post voglio mostrare un effetto un po' più complicato ma comunque sempre di facile installazione. Le immagini al passaggio del mouse ruoteranno di 360 gradi e diventeranno circolari. È stato introdotto anche un bordo e una ombreggiatura. Il codice da usare è il seguente

<style>
.effetto1 img {
border:10px solid #fff;
overflow:hidden;
-webkit-box-shadow:5px 5px 5px #111;
box-shadow:5px 5px 5px #111;
-webkit-transition:all .5s ease;
-moz-transition:all .5s ease;
-o-transition:all .5s ease;
-ms-transition:all .5s ease;
transition:all .5s ease;margin:20px
}
.effetto1 img:hover{
border-radius:50%;
-webkit-transform:rotate(360deg);
-moz-transform:rotate(360deg);
-o-transform:rotate(360deg);
-ms-transform:rotate(360deg);
transform:rotate(360deg)
}
</style>
 <div class="separator" style="clear: both; text-align: center;"><div class="effetto1"><img alt="Effetto"  src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg9cX6nsxOdVAmmVSBSjoPdA-DEFQxpdogT4DHeDyrNQiiGl2MyGlYBAd8LC1Cinr84_hrqby2bhgRjFlk6f0Kzo5zlx50fDyXtTmvDlqzNGH42Igvu9XokAeDr9gEeGz9wudFZYbKE_LgN/s300/farfalla3.png" /></div></div>

che può essere incollato in un post o in una pagina statica in modalità HTML. Alternativamente la parte evidenziata di verde può essere incollata nel modello di Blogger subito sopra </head> e allora basterà incollare nell'articolo la parte evidenziata di giallo. Ovviamente l'URL della immagine colorato di rosso deve essere sostituito con quello di una vostra foto.  La classe è stata denominata effetto1 ma tale nome può essere ovviamente modificato.

La dimensione della immagine non è rilevante basta che venga agevolmente contenuto nell'area del post. Per facilitare la separazione tra immagine e resto dell'articolo possono essere inseriti prima del tag <div> e dopo il tag </div> uno o più tag <br/> che rappresentano dei salti di riga.