JSFiddle - React, Tailwind, and code Playground

flipping css animation

by Pavlo

HTML

<div id="coin-flip-cont">
<div id="coin">
<img class="front" src="//www.gravatar.com/avatar/e91c3f3c2a2f8ae105450c303bf67009/?default=&s=128"/>
<img class="back" src="http://test.paulitto.com/img/dog.jpg"/>
</div>
</div>

CSS

html, body {
margin: 0;
width: 100%;
height: 100%;
background-color: #333;
}

#coin-flip-cont {
width: 200px;
height: 200px;
position: absolute;
top: calc(50% - 100px);
left: calc(50% - 100px);
}

#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: #3498db;
}

#coin .back {
transform: translateZ(-1px) rotateY(180deg);
border-radius: 50%;
background-color: #2ecc71;
}

#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;
}

#coin.animation1260 {
-webkit-animation: rotate1260 3s linear forwards; 
animation: rotate1260 3s linear forwards;
}

#coin.animation1440 {
-webkit-animation: rotate1440 3s linear forwards; 
animation: rotate1440 3s linear forwards;
}

#coin.animation1620 {
-webkit-animation: rotate1620 3s linear forwards; 
animation: rotate1620 3s linear forwards;
}

#coin.animation1800 {
-webkit-animation: rotate1800 3s linear forwards; 
animation: rotate1800 3s linear forwards;
}

#coin.animation1980 {
-webkit-animation: rotate1980 3s linear forwards; 
animation: rotate1980 3s linear forwards;
}

#coin.animation2160 {
-webkit-animation: rotate2160 3s linear forwards; 
animation: rotate2160 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 {...

JavaScript

jQuery(document).ready(function($){

var spinArray = ['animation900','animation1080','animation1260','animation1440','animation1620','animation1800','animation1980','animation2160'];

function getSpin() {
var spin = spinArray[Math.floor(Math.random()*spinArray.length)];
return spin;
}

$('#coin').on('click', function(){

$('#coin').removeClass();

setTimeout(function(){
$('#coin').addClass(getSpin());
}, 100);

});

});