#coin-flip-cont {
width: 200px;
height: 200px;
margin: auto;
}

#coin {
position: relative;
width: 200px;
transform-style: preserve-3d;
}

#coin .front, #coin .back {
position: absolute;
width: 200px;
height: 200px;
}

#coin .front {
transform: translateZ(1px);
border-radius: 50%;
background-color: black;
}

#coin .back {
transform: translateZ(-1px) rotateY(180deg);
border-radius: 50%;
border-style: solid;
border-width: 5px;
background-color: white;
}

#coin.animation900 {
-webkit-animation: rotate900 3s linear forwards; 
animation: rotate900 3s linear forwards;
}

#coin.animation1080 {
-webkit-animation: rotate1080 3s linear forwards; 
animation: rotate1080 3s linear forwards;
}

@-webkit-keyframes rotate900 {
from { -webkit-transform: rotateY(0); -moz-transform: rotateY(0); transform: rotateY(0); }
to { -webkit-transform: rotateY(900deg); -moz-transform: rotateY(900deg); transform: rotateY(900deg); }
}

@keyframes rotate900 {
from { -webkit-transform: rotateY(0); -moz-transform: rotateY(0); transform: rotateY(0); }
to { -webkit-transform: rotateY(900deg); -moz-transform: rotateY(900deg); transform: rotateY(900deg); }
}

@-webkit-keyframes rotate1080 {
from { -webkit-transform: rotateY(0); -moz-transform: rotateY(0); transform: rotateY(0); }
to { -webkit-transform: rotateY(1080deg); -moz-transform: rotateY(1080deg); transform: rotateY(1080deg); }
}

@keyframes rotate1080 {
from { -webkit-transform: rotateY(0); -moz-transform: rotateY(0); transform: rotateY(0); }
to { -webkit-transform: rotateY(1080deg); -moz-transform: rotateY(1080deg); transform: rotateY(1080deg); }
}