•  
    Face avant
    ligne 01
    ligne 02
    Et...face arrière

     

    This is the front side
    This is the back side



    <script src="http://ekladata.com/sVcpvNqWUPivOIRF0mRWwpQuZ_Q/highlight-pack.js"></script>
    <script>// <![CDATA[
    onJSFilesLoaded.push(function(){
         hljs.initHighlighting.called = false;
         hljs.initHighlighting();});
    // ]]></script>
    </p>
    <div class="flipcard h">
    <div class="front">Face avant<img style="float: right; padding: 10px; width: 40%;" src="http://dl4.glitter-graphics.net/pub/141/141854q961amfh1n.gif" alt="" /><br />ligne 01<br />ligne 02</div>
    <div class="back">Et...face arri&egrave;re</div>
    </div>
    <p>&nbsp;</p>
    <div class="flipcard v">
    <div class="front">This is the front side</div>
    <div class="back">This is the back side</div>
    </div>
    .titre {
     max-width:100px;
     padding:5px;
      
     background-color:#A9D9EF;
    color: #000;
     
    border:2px double #78ABCC; 
      
     box-shadow:6px 6px 10px black;
     }
     .pre-lh {
     width: 90%;
     border: 0px; 
     padding: 0;
     box-shadow: 6px 6px 10px black;
     margin-bottom: 20px;
     margin-left: 20px;
     }
     /*---------------CSS-Menu-rotatif--------------*/
    .flipcard {
      margin: 20px auto;
      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: #000;
      background-color: #A9D9EF;
     border-radius:65px/15px;
      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: #000;
      background-color: #fff;
     border-radius:65px/15px;
      padding: 10px;
      backface-visibility: hidden;
    box-shadow:6px 6px 10px black;
    }