.coin {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    position: relative;
    transform-style: preserve-3d; /* Стандартная версия */
    -webkit-transform-style: preserve-3d; /* Для Safari */
    -moz-transform-style: preserve-3d; /* Для старых версий Firefox */
}

.coin div {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    position: absolute;
    backface-visibility: hidden; /* Стандартная версия */
    -webkit-backface-visibility: hidden; /* Для Safari */
    -moz-backface-visibility: hidden; /* Для старых версий Firefox */
}

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

.coin {
    transition: transform 1s ease-in;
    transform-style: preserve-3d;
}

.coin .blue {
    z-index: 100;
}

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

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

.coin.flipblue {
    animation: flipBlue 5s ease-out forwards;
    -webkit-animation: flipBlue 5s ease-out forwards;
    -moz-animation: flipBlue 5s ease-out forwards;
    -o-animation: flipBlue 5s ease-out forwards;
}

.coin.flipred {
    animation: flipRed 5s ease-out forwards;
    -webkit-animation: flipRed 5s ease-out forwards;
    -moz-animation: flipRed 5s ease-out forwards;
    -o-animation: flipRed 5s ease-out forwards;
}

@keyframes flipBlue { 
    from { transform: rotateY(0); }
    to { transform: rotateY(2880deg); }
}

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

@keyframes flipRed { 
    from { transform: rotateY(0); }
    to { transform: rotateY(3060deg); }
}

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