-
Menu Rotatif CSS
Un menu rotatif en CSS, bof rien de bien original. Sauf qu'ici le rendu "rotation" est au top ...!
Grace à "perspective: 500px;" et "backface-visibility: hidden;Face avant
ligne 01
ligne 02Et...face arrièreThis is the front sideThis is the back sideCode CSS :
.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; }
Code HTML :
<div class="flipcard h"> <div class="front">Face avant<img style="float: right; padding: 10px; width: 40%;" src="http://ekladata.com/woejBFweCrnD3_zHKcNXAstFy7Q.png" 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>
-
Commentaires
9mary normandieMercredi 2 Décembre 2020 à 00:33bonjour sympa ces codes et cette image qui bouge
j'aime bien j'essayerai, merci
bon après midi et bon week-end
bisous Elyci
7blondi59Vendredi 7 Octobre 2016 à 09:29Bonjour.
Je me suis bien amusée aussi, j'ai vu la devinette chez La Gentille Rebelle
et j'ai atterri chez toi !
J'ai mis ici :
http://viphany.eklablog.com/languedoc-roussillon-effet-rotatif-a121418604
(c'est un blog test que j'aimerai garder mais je n'en sais plus trop rien ...)
Je les ai mises un peu trop grandes à mon goût ... mais bon je laisse comme ça pour le moment.
Bon dimanche.
Dani et ses chats (leschatsdubocage)
MERCI pour ce code qui va bien amuser la galerie
mais comment faire pour l'écrit des deux côtés ?
FAIRE DEUX IMAGES ? RECTO VERSO
Merci pour ce code (je me suis bien amusé lol)
http://la-gentille-rebelle.eklablog.com/devinette-avec-effet-rotatif-de-gmz-papyrock-a117986338
J'ai des articles, parus ou à paraître) sur ce système (flip).
Quant au menu: le CSS permet bien des variantes mais je n'utilise pas beaucoup.
Intéressant.
Ajouter un commentaire
Bonjour
Cela ne marche pas .................