Pubblicato il 16/02/15e aggiornato il

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://lh3.googleusercontent.com/-l5M-gctltg8/VOG-uFYFl8I/AAAAAAAArDQ/aBzjv6IvK_s/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.




Effetto






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. 




2 commenti :

  1. Grazie. Applicato ad una pagina. Sempre molto utile.

    RispondiElimina
  2. Molto carino, anche perchè il codice è semplice e comprensibile come esempio di programmazione

    RispondiElimina

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.