• 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 02
    Et...face arrière

     

    This is the front side
    This is the back side

     

    Code 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>
    
    Tableau à onglets - CSS »

  • Commentaires

    7
    blondi59
    Vendredi 7 Octobre 2016 à 09:29
    blondi59

    bonjour  j'ai essayé mais rien a faire sa ne marche pas snif

    6
    Mercredi 6 Juillet 2016 à 21:34

    Super merci beaucoup

    5
    Dimanche 20 Mars 2016 à 01:37

    Bonjour.

    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)

    4
    Mardi 23 Juin 2015 à 10:19
    manik

    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

    3
    Mardi 23 Juin 2015 à 08:50

    @LGR  >>>> wink2 !!!!!!

    1
    Samedi 13 Juin 2015 à 08:45

    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.

    Suivre le flux RSS des commentaires


    Ajouter un commentaire

    Nom / Pseudo :

    E-mail (facultatif) :

    Site Web (facultatif) :

    Commentaire :


Version standard

Poursuivre l'affichage en version standard (ordinateur),

cliquer ci-dessous

Clic ici

(Puis fermer cette fenêtre, en haut à droite)

Cet article vous a plu ?
Abonnez-vous !!!

Newsletter