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
8656 | 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.

3
SHARES
Be Sociable,
share and enjoy!
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
×