NT Applications | New Members

HTML

<div style="position: relative; width: 708px; height: 450px; background: url(https://i.imgur.com/4mguYqg.gif);">
	
	<!-- -->
	<div class="swapping three" style="position: absolute; overflow: hidden; width: 100px; height: 179px; left: 49px; top: 271px;">
		<div class="flipBack flipCard">
			<img src="https://i.imgur.com/K2PfgWx.png" draggable="false">
		</div>
		<div class="flipFront flipCard">
			<img src="https://i.imgur.com/z11O482.png" draggable="false">
		</div>
	</div>
	
	<!-- -->
	<div class="swapping three" style="position: absolute; overflow: hidden; width: 81px; height: 170px; left: 161px; top: 280px;">
		<div class="flipBack flipCard">
			<img src="https://i.imgur.com/P8M0nwm.png" draggable="false">
		</div>
		<div class="flipFront flipCard">
			<img src="https://i.imgur.com/yVFHN0B.png" draggable="false">
		</div>
	</div>
	
	<!-- -->
	<div class="swapping three" style="position: absolute; overflow: hidden; width: 107px; height: 198px; left: 255px; top: 252px;">
		<div class="flipBack flipCard">
			<img src="https://i.imgur.com/0M1DTxv.png" draggable="false">
		</div>
		<div class="flipFront flipCard">
			<img src="https://i.imgur.com/YkSpktf.png" draggable="false">
		</div>
	</div>
	
</div>

CSS

.swapping {
	cursor: pointer;
}

.flipCard {
	position: absolute;
	width: 100%;
	height: 100%;
	overflow: hidden;
	transition: transform 1s ease;
	backface-visibility: hidden;
	-webkit-transform-style: preserve-3d;
}

.flipFront {
	transform: rotateY(180deg);
	-webkit-backface-visibility: hidden;
	-webkit-transform-style: preserve-3d;
}

.swapping.three.visible .flipFront {
	transform: rotateY(0deg);
}

.flipBack {
	transform: scaleX(-1);
}

.swapping.three.visible .flipBack {
	transform: rotateY(-180deg);
	-webkit-backface-visibility: hidden;
	-webkit-transform-style: preserve-3d;
}

JavaScript

$('.swapping').click(function() {
	$(this).toggleClass('visible');
	$(this).css('pointer-events', 'none');
	var passThis = this;
	setTimeout(function() {
		$(passThis).css('pointer-events', 'auto');
	}, 1000);
});