Ptite_Perle
A les clefs du forum
Je tiens le trousseau de clefs du forum
Fondatrice Messages : 5859 Venue : 27/06/2009 Je suis : Age : 60 Je vie à : Lyon Humeur : Bonne humeur Mes Points : 120481 Menu Rotatif CSS | | Coucou, Voici comme réaliser un menu rotatif, comme une pancarte qui à une double face en rotation. CSS - Code:
-
.flipcard { margin:20px; position: relative; width: 220px; height: 160px; perspective: 500px; } .flipcard.v:hover .front, .flipcard.v.flip .front{ transform: rotateX(180deg); } .flipcard.v:hover .back, .flipcard.v.flip .back{ transform: rotateX(0deg); } .flipcard.v .back{ transform: rotateX(-180deg); } .flipcard.h:hover .front, .flipcard.h.flip .front{ transform: rotateY(180deg); } .flipcard.h:hover .back, .flipcard.h.flip .back{ transform: rotateY(0deg); } .flipcard.h .back{ transform: rotateY(-180deg); } .flipcard .front { position:absolute; width: 100%; height: 100%; box-sizing: border-box; transition: all 1s ease-in; color: white; background-color: grey; padding: 10px; backface-visibility: hidden; box-shadow:6px 6px 10px black; } .flipcard .back { position:absolute; width: 100%; height: 100%; box-sizing: border-box; transition: all 1s ease-in; color: yellow; background-color: red; padding: 10px; backface-visibility: hidden; box-shadow:6px 6px 10px black; } HTML - Code:
-
<div class="flipcard h"> <div class="front">Face avant<img style="float: right; padding: 10px; width: 40%;" src="URL IMAGE SUR VOTRE MENU" alt="" /><br />ligne 01<br />ligne 02</div> <div class="back">Et...face arrière</div> </div> <p> </p> <div class="flipcard v"> <div class="front">This is the front side</div> <div class="back">This is the back side</div> </div> |
| |