.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;
}
.coin div {
  position: absolute;
  -webkit-backface-visibility: hidden;
}
.coin .blue {
  z-index: 100;
}
.coin .red {
  -webkit-transform: rotateY(-180deg);
}

.coin.red {
    -webkit-transform: rotateY(-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;
}
.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;
}

@-webkit-keyframes flipBlue {
  from { -webkit-transform: rotateY(0); -moz-transform: rotateY(0); transform: rotateY(0); }
  to { -webkit-transform: rotateY(2880deg); -moz-transform: rotateY(2880deg); transform: rotateY(2880deg); }
}
@-webkit-keyframes flipRed {
  from { -webkit-transform: rotateY(0); -moz-transform: rotateY(0); transform: rotateY(0); }
  to { -webkit-transform: rotateY(3060deg); -moz-transform: rotateY(3060deg); transform: rotateY(3060deg); }
}