.coin {
    width: 80px;
    height: 80px;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    border-radius: 50%;
    position: relative;
}

.coin div {
    width: 100%;
    height: 100%;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    border-radius: 50%;
}

.coin img {
    width: 100%;
    height:100%;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    border-radius: 50%;
}

.coin {
  transition: -webkit-transform 1s ease-in;
  -webkit-transform-style: preserve-3d;
  transform-style: preserve-3d;
  will-change: transform;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}
.coin div {
  position: absolute;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}
.coin .blue {
  z-index: 100;
}
.coin .red {
  -webkit-transform: rotateX(-180deg);
}

.coin.red {
    -webkit-transform: rotateX(-180deg);
}

.coin.flipblue {
  -webkit-animation: flipBlue 5s ease-out forwards;
  -moz-animation: flipBlue 5s ease-out forwards;
  -o-animation: flipBlue 5s ease-out forwards;
  animation: flipBlue 5s ease-out forwards;
  will-change: transform;
}
.coin.flipred {
  -webkit-animation: flipRed 5s ease-out forwards;
  -moz-animation: flipRed 5s ease-out forwards;
  -o-animation: flipRed 5s ease-out forwards;
  animation: flipRed 5s ease-out forwards;
  will-change: transform;
}

@keyframes flipBlue {
  0%   { transform: rotateX(0deg); }
  20%  { transform: rotateX(900deg); }    /* плавные первые ~2.5 оборота */
  50%  { transform: rotateX(1980deg); }   /* середина, замедляемся */
  80%  { transform: rotateX(2340deg); }   /* почти финиш */
  100% { transform: rotateX(2520deg); }   /* финал (7 * 360) на синей стороне */
}
@keyframes flipRed {
  0%   { transform: rotateX(0deg); }
  20%  { transform: rotateX(900deg); }    /* плавные первые ~2.5 оборота */
  50%  { transform: rotateX(1980deg); }   /* середина, замедляемся */
  80%  { transform: rotateX(2520deg); }   /* почти финиш */
  100% { transform: rotateX(2700deg); }   /* финал (7.5 * 360) на красной стороне */
}
@-webkit-keyframes flipBlue {
  0%   { -webkit-transform: rotateX(0deg); }
  20%  { -webkit-transform: rotateX(900deg); }
  50%  { -webkit-transform: rotateX(1980deg); }
  80%  { -webkit-transform: rotateX(2340deg); }
  100% { -webkit-transform: rotateX(2520deg); }
}
@-webkit-keyframes flipRed {
  0%   { -webkit-transform: rotateX(0deg); }
  20%  { -webkit-transform: rotateX(900deg); }
  50%  { -webkit-transform: rotateX(1980deg); }
  80%  { -webkit-transform: rotateX(2520deg); }
  100% { -webkit-transform: rotateX(2700deg); }
}