Creare un effetto rotazione sulle immagini con CSS3

 

Ciao amici di Pixolo, in questo nuovo tutorial vedremo come implementare un effetto rotazione ad un’immagine o ad un contenitore html contenente ad esempio testo o altri elementi html. L’effetto di rotazione tra i due elementi si attiverà al passaggio del mouse sugli stessi elementi. Il tutto impiegando esclusivamente semplice codice HTML e le proprietà di CSS3. Vediamo allora come fare.

Effetto rotazione – Codice HTML

 

Effetto rotazione – Codice CSS

Ricordate di specificare alla riga .flip-container, .front, .back {width: 627px;height: 232px;} la relativa dimensione del vostro contenuto a cui applicherete l’effetto, che per le immagini che io userò in questo esempio sono appunto quelle che ho specificato nel codice sopra, ma che vanno modificate.

E di seguito, potrete vedere il risultato finale che si attiva al passaggio del mouse sull’immagine.

Questo è tutto, grazie a David Walsh per l’utile tutorial relativo alla creazione di questo bell’effetto rotazione.

pixolo ads
Animal Comix
11197 | Articolo pubblicato 6 anni fa nella categoria Css - Html.
Puoi seguire tutti i nuovi articoli e gli aggiornamenti di Pixolo.it attraverso i Pixolo feeds feed RSS.
Puoi inoltre lasciare un commento, oppure fare un trackback dell'articolo dal tuo sito.