#coin {
position: relative;
width: 15rem;
height: 15rem;
margin: 2rem 0rem;
transform-style: preserve-3d;

}

#coin div {
width: 100%;
height: 100%;
border: 2px solid black;
border-radius: 50%;
backface-visibility: hidden;
background-size: contain;
position: absolute;
}

.heads {
background-image: url("https://images.cdn.yle.fi/image/upload/f_auto,fl_progressive/q_auto/w_1788,h_1005,c_crop,x_0,y_101/w_500/dpr_2/v1452178064/14-svyle-266861568e7a510e4fe.jpg");
}

.animate-heads {
animation: flipHeads 3s;
animation-fill-mode: forwards;
}

@keyframes flipHeads {
from {
transform: rotateY(0deg);
}
to {
transform: rotateY(1800deg);
}
}

.tails {
background-image: url("https://images.cdn.yle.fi/image/upload/f_auto,fl_progressive/q_auto/w_1788,h_1005,c_crop,x_0,y_101/w_500/dpr_2/v1452178064/14-svyle-266861568e7a510e4fe.jpg");
transform: rotateY(-180deg);
}

.animate-tails {
animation: flipTails 3s;
animation-fill-mode: forwards;
}

@keyframes flipTails {
from {
transform: rotateY(0deg);
}
to {
transform: rotateY(1620deg);
}
}





<script>
const coin = document.querySelector('#coin');
const button = document.querySelector('#flip');
const status = document.querySelector('#status');
const heads = document.querySelector('#headsCount');
const tails = document.querySelector('#tailsCount');

let headsCount = 0;
let tailsCount = 0;


function deferFn(callback, ms) {
setTimeout(callback, ms);
}

function processResult(result) {
if (result === 'heads') {
headsCount++;
heads.innerText = headsCount;
} else {
tailsCount++;
tails.innerText = tailsCount;
}
status.innerText = result.toUpperCase();
}

function flipCoin() {
coin.setAttribute('class', '');
const random = Math.random();
const result = random < 0.9 ? 'heads' : 'tails';
deferFn(function() {
coin.setAttribute('class', 'animate-' + result);
deferFn(processResult.bind(null, result), 2900);
}, 100);
}

button.addEventListener('click', flipCoin);

</script>