SOURCE

<div class="flip-container">
  <div class="flipper">
    <div class="front">
    </div>
    <div class="back">
    </div>
  </div>
</div>

.flip-container {
  perspective: 800px;
  width: 100px;
  height: 100px;
  position: absolute;
  top: 50px;
  right: 50px;
  animation: move 6s 1s cubic-bezier(.6,0,.4,1) infinite;
}

.flip-container:hover .flipper {
  transform: rotateY(180deg);
}

.flipper {
  transform-style: preserve-3d;
  position: relative;
  height: 100%;
  width: 100%;
  animation: rotate 6s 1s cubic-bezier(.6,0,.4,1) infinite;
}

@keyframes rotate {
  0% {transform: rotateX(0deg)
  rotateY(0deg) rotateZ(0deg)}
  30% {transform: rotateX(0deg)
  rotateY(0deg) rotateZ(-5deg)}
  60%, 80% {transform: rotateX(360deg)
  rotateY(180deg) rotateZ(-20deg)}
  100% {transform: rotateX(0deg)
  rotateY(180deg) rotateZ(0deg)}
}

@keyframes move {
  0% {top: 50px; right: 50px; transform: rotate(0deg)}
  20% {top: calc(50% - 200px); right: calc(50% - 200px); width: 400px; height: 400px; transform: rotate(0deg)}
  80% {top: calc(50% - 200px); right: calc(50% - 200px); width: 400px; height: 400px; transform: rotate(-15deg)}
  100% {top: 50px; right: 50px; transform: rotate(0deg)}
}

.front,
.back {
  backface-visibility: hidden;
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  padding: 20px;
  font-size: 20px;
  font-family: sans-serif;
  box-sizing: border-box;
  border-radius: 4%;
}

.front {
  transform: rotateY(0deg);
  background: url(http://pierre.chachatelier.fr/jeux-societe/images/loups-garous-dos-large.jpg) no-repeat 0 0 / cover;
}

.back {
  transform: rotateY(180deg);
  background: url(http://pierre.chachatelier.fr/jeux-societe/images/loups-garous-loup-large.jpg) no-repeat 0 0 / cover;
}