JSFiddle - React, Tailwind, and code Playground

by nickadeemus2002

HTML

<div class="container">
			<div id="card"> 
				<div class="front"> 
					1
				</div> 
				<div class="back"> 
					2
				</div> 
			</div> 
			
		</div>

CSS

.container {
	width: 200px;
	height: 260px;
	position: relative;
	margin: 0 auto 40px;
	-webkit-perspective: 800px;
	overflow: hidden;
	-webkit-transition: all .5s ease 0s;
}

#card {
	width: 100%;
	height: 100%;
	position: absolute;
	-webkit-transition: all .5s ease 0s;
	-webkit-transform-style: preserve-3d;
	position: absolute;
	left: 0;
	top: 0;
}

#card.flipped {
	-webkit-transform: rotateY( 180deg );
	position: fixed;
	left: 50%;
	top: 50%;
}

.flippedContainer{
	overflow: visible;
	width: 400px;
	height: 520px;
}

#card div {
	display: block;
	height: 100%;
	width: 100%;
	line-height: 260px;
	color: white;
	text-align: center;
	font-weight: bold;
	font-size: 140px;
	position: absolute;
	-webkit-backface-visibility: hidden;
}

#card .front {
	background: red;
}

#card .back {
	background: blue;
	-webkit-transform: rotateY( 180deg );
}

JavaScript

$('.front').click(function(){
		$('#card').toggleClass('flipped');
		$('.container').toggleClass('flippedContainer');
	});
	$('.back').click(function(){
        //waits half second
        setTimeout(function(){
           $('#card').toggleClass('flipped');
		   $('.container').delay(500).toggleClass('flippedContainer');
        },500);
		
        
        //$('#card').toggleClass('flipped');
		//$('.container').delay(500).toggleClass('flippedContainer');
	})