In questo tutorial vedremo come implementare un menu animato con un bell’effetto di rotazione 3D che si attiva al passaggio del mouse su i vari elementi. Il tutto impiegando esclusivamente semplice codice HTML e le propriet?? di CSS3. Vediamo allora come fare.
Menu animato con rotazione 3D – Codice HTML
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
<ul class="block-menu"> <li><a href="/" class="three-d"> Home <span aria-hidden="true" class="three-d-box"> <span class="front">Home</span> <span class="back">Home</span> </span> </a></li> <li><a href="/demos" class="three-d"> Demos <span aria-hidden="true" class="three-d-box"> <span class="front">Demos</span> <span class="back">Demos</span> </span> </a></li> <!-- more items here --> </ul> |
Menu animato con rotazione 3D – 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 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 |
/* basic menu styles */ .block-menu { display: block; background: #000; } .block-menu li { display: inline-block; } .block-menu li a { color: #fff; display: block; text-decoration: none; font-family: 'Passion One', Arial, sans-serif; font-smoothing: antialiased; text-transform: uppercase; overflow: visible; line-height: 20px; font-size: 24px; padding: 15px 10px; } /* animation domination */ .three-d { perspective: 200px; transition: all .07s linear; position: relative; cursor: pointer; } /* complete the animation! */ .three-d:hover .three-d-box, .three-d:focus .three-d-box { transform: translateZ(-25px) rotateX(90deg); } .three-d-box { transition: all .3s ease-out; transform: translatez(-25px); transform-style: preserve-3d; pointer-events: none; position: absolute; top: 0; left: 0; display: block; width: 100%; height: 100%; } /* put the "front" and "back" elements into place with CSS transforms, specifically translation and translatez */ .front { transform: rotatex(0deg) translatez(25px); } .back { transform: rotatex(-90deg) translatez(25px); color: #ffe7c4; } .front, .back { display: block; width: 100%; height: 100%; position: absolute; top: 0; left: 0; background: black; padding: 15px 10px; color: white; pointer-events: none; box-sizing: border-box; } |
Di seguito, cliccando sulla demo, potrete vedere il risultato finale.
DemoQuesto ?? tutto, grazie a David Walsh per l’utile tutorial relativo alla creazione di questo bel menu animato.
pixolo ads
| Articolo pubblicato 5 anni fa nella categoria 
