<div class="conteneur">
  <div class="flipcard">
    <div class="avant"><img width="200" height="150" src="https://images.unsplash.com/photo-1514821591372-acc8dff9f93a?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=1080&fit=max&s=d0a8e7170cb5793df98a5accc1d11a3f" alt="" /></div>
    <div class="arriere"><img width="200" height="150" src="https://images.unsplash.com/photo-1502067599658-16d0aeff61cd?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=1080&fit=max&s=168efe5d0c86e9a65ffedf56e7c054f1" alt="" /></div>
  </div>
</div>

body{
  background: rgb(230,230,230);
  padding: 30px;
}
html{
  font: 2em sans-serif;
  text-align: center;
}
.conteneur{
  width: 200px;
  height: 200px;
  perspective: 600px;
  margin: 0 auto;
}
.flipcard{
  transform-style: preserve-3d;
  animation: flipcard 4s infinite ease-in-out;
}
.flipcard,
.flipcard > div{
  width: inherit;
  height: inherit;
  transition: transform 1s;
}
.flipcard > div{
  position: absolute;
  backface-visibility: hidden;
}
.arriere{
  transform: rotateX(180deg);
}

@-webkit-keyframes flipcard {
  0% { 
    transform: rotateX( 0deg ) ;
  }
  50% {
    transform: rotateX( 180deg ) ;
  }
  100% {
    transform: rotateX( 360deg ) ;
  }
}