<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è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>
.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;
}