Menu Rotatif CSS

Face avant
ligne 01
ligne 02

Et...face arrière

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="https://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>