.coin {
    background: darkgoldenrod;
    width: 1em;
    height: 1em;
    border-radius: 50%;
    position: relative;
    -webkit-transform-style: preserve-3d;
    animation: coin-spin 4s linear infinite;
}

@keyframes coin-spin {
    0% {
        transform: rotateY(0deg);
    }
    100% {
        transform: rotateY(360deg);
    }
}

.coin:before {
    background-color: darkgoldenrod;
    position: absolute;
    border-radius: 50%;
    content: '';
    height: 1em;
    width: 1em;
    -webkit-transform: translateZ(-0.075em);
}

.coin:after {
    background-color: darkgoldenrod;
    content: '';
    left: 0.425em;
    position: absolute;
    height: 1em;
    width: 0.075em;
    z-index: -10;
    -webkit-transform: rotateY(-90deg);
    -webkit-transform-origin: 100% 50%;
}


.coin .back {
    background-color: darkgoldenrod;
    position: absolute;
    border-radius: 50%;
    content: '';
    height: 1em;
    width: 1em;
    -webkit-transform: translateZ(-0.005em);
    border: 1px solid black;
}

.coin .front {
    background-color: transparent;
    position: absolute;
    border-radius: 50%;
    content: '';
    height: 1em;
    width: 1em;
    -webkit-transform: translateZ(-0.0755em);
    border: 1px solid black;
}