<div class="axes un">
  <div class="rotated1">                              
    <br><br>
    Survolez moi
  </div>
  <div class="rotated2">                              
    <br><br>
    Survolez moi
  </div>
</div>

body{
	background: rgb(230,230,230);
  perspective: 800px;
  padding: 30px;
}
div.axes{
	display:inline-block;
	width:300px;
	height:150px;
	padding:1px;
	/*margin-right:3em;*/
  border: thin silver solid;
}
div.rotated1 {
  text-align: center;
  background-color: pink;
  width: 150px;
  height: 150px;
  float: left;
  transition: 3s;
  backface-visibility: hidden;
}
div.rotated2 {
  text-align: center;
  background-color: silver;
  width: 150px;
  height: 150px;
  float: left;
  transition: 3s;
  backface-visibility: visible;
}
.axes.un:hover div.rotated1, .axes.un:hover div.rotated2 {
  transform: rotateY(180deg);
}