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
Cambia Copertina
9291 | Articolo pubblicato 4 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.
  • Marco Solinas

    Il codice css non funziona correttamente su Firefox (né 42 né 43), né su Explorer 11. Sarebbe interessante renderlo davvero cross browser.

Resta aggiornato!
Segui Pixolo anche su Facebook!
Don't show more - I am already fan
×
Salva il post su Facebook
What is a Facebook Save Button?

The save button lets you save the current page to your private list on Facebook for a future use or consultation.
info | close
×