JSFiddle - React, Tailwind, and code Playground

by gion_13

HTML

<div class="container" style="top: 200px;left : 600px;">
    <div class="coin back">back 1</div>
    <div class="coin front">front </div>
</div>
<div class="container" style="top: 600px;left : 200px;">
    <div class="coin back">back 2</div>
    <div class="coin front">front 2</div>
</div>
<div class="container" style="top: 500px;left : 450px;">
    <div class="coin back">back 3</div>
    <div class="coin front">front 3</div>
</div>
<div class="container"  style="top: 400px;left : 150;">
    <div class="coin back">back 4</div>
    <div class="coin front">front 4</div>
</div>
<div class="container" style="top: 400px;left : 500px;">
    <div class="coin back">back 5</div>
    <div class="coin front">front 5</div>
<div>

CSS

html{
    background : url(http://openclipart.org/people/Clue/Clue_Simple_Clouds.svg) no-repeat;
    -webkit-background-size : 100% 100%;
    background-size : 100% 100%;
}
.container{
    position : absolute;
}
.coin{
    width : 100px;
    height : 100px;
    background-color : rgba(250,20,20,.5);
    position : absolute;
    font: 25px/100px Arial,Helvetica,sans-serif;
    text-align : center;
     
    /* adds the 3d effect */
    -webkit-perspective: 500;
    -webkit-transform-style: preserve-3d;
    
    /* hides the back face */
    -webkit-backface-visibility:hidden;
    -moz-backface-visibility:hidden; 
    backface-visibility:hidden;
    
    /* initial rotation (~none in this case) */
    -webkit-transform : rotateY(-360deg);
    
    /* border radius */
    -webkit-border-radius : 50px;
    -moz-border-radius : 50px;
    -o-border-radius : 50px;
    -ms-border-radius : 50px;
    border-radius : 50px;
    
    -webkit-transition: all 1000ms ease-in-out;
    -moz-transition: all 1000ms ease-in-out;
    -ms-transition: all 1000ms ease-in-out;
    -o-transition: all 1000ms ease-in-out;
    transition: all 1000ms ease-in-out;
}

.coin.back{
    background-color : rgba(20,20,250,.5);
    -webkit-transform : rotateY(-180deg);
    -moz-transform : rotateY(-180deg);
    -o-transform : rotateY(-180deg);
    -ms-transform : rotateY(-180deg);
    transform : rotateY(-180deg);
}

.container.flipped .coin{
    width : 500px;
    height : 500px;
    top : 0;
    left : 0;
    font-size : 125px;
    line-height : 500px;
   
    -webkit-border-radius : 250px;
    -moz-border-radius : 250px;
    -o-border-radius : 250px;
    -ms-border-radius : 250px;
    border-radius : 250px;
    
    z-index : 10;
    
}
.container.flipped .coin.front{
    -webkit-transform : rotateY(180deg) rotateX(360deg);
    -moz-transform : rotateY(180deg) rotateX(360deg);
    -o-transform : rotateY(180deg) rotateX(360deg);
    -ms-transform : rotateY(180deg) rotateX(360deg);
    transform :...

JavaScript

$('body').on('touchend click','.container',function(){
    var self = $(this).toggleClass('flipped'),
        coins = $('.coin',self),
        w = $(window),
        p = self.position();
    if(self.hasClass('flipped'))
        coins.offset({
                left : (w.width()-500) / 2,
                top : (w.height()-500) / 2
            });
   else
        coins.removeAttr('style');
});