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
|
1 2 3 4 5 6 7 8 9 10 |
<div class="flip-container"> <div class="flipper"> <div class="front"> <!-- specificare qui il contenuto frontale --> </div> <div class="back"> <!-- specificare qui il contenuto posteriore --> </div> </div> </div> |
Effetto rotazione – Codice CSS
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 |
.flip-container { perspective:1000; -webkit-perspective:1000; } .flip-container, .front, .back { width:627px; height:232px; } .flipper { transition:.6s; transform-style:preserve-3d; -webkit-transition:.6s; -webkit-transform-style:preserve-3d; position:relative; } .front,.back { backface-visibility:hidden; -webkit-backface-visibility:hidden; position:absolute; top:0; left:0; } .front { z-index:2; } .flip-container:hover .flipper, .flip-container.hover .flipper, .back { transform:rotateY(180deg); -webkit-transform: rotateY(180deg); } |
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.
| Articolo pubblicato 5 anni fa nella categoria 
