html{
  font: 15px sans-serif;
  text-align: center;
}
.scene{
  width: 250px;
  height: 100px;
  perspective: 600px;
  margin: 20px auto;
}
.flip{
  transform-style: preserve-3d;
}
.flip,
.flip > div{
  width: inherit;
  height: inherit;
  transition: transform 1s;
}
.flip > div{
  line-height: 100px;
  position: absolute;
  backface-visibility: hidden;
}
.avant{
  background: #fff ;
  border:2px solid #000;
  color:#000;
  font-size:23px;
}
.arriere{
  background:  #f2f2f2;
  border:2px solid #000;
  font-size:23px;
text-decoration:none;
  transform: rotateX(180deg);
}
 
.scene:hover .flip{
  transform: rotateX(180deg);
}