JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
    <div class="qcontainer" style="top:5px; left:100px">
        <div class="inner">
            <img src="https://dummyimage.com/300x300/000/fff" class="front face" />
            <img src="https://dummyimage.com/300x300/DDD/000" class="back face" />
        </div>
    </div>
</div>

CSS

.container {
    position: relative;
    height: 100%;
    min-height:400px;
}

.qcontainer {
    position: absolute;
    perspective: 800px;
    -webkit-perspective: 800px;
    width: 80px;
    height: 80px;
}

.inner {
  width: 100%;
  height: 100%;
  position: relative;
  transform-style: preserve-3d;
  transition: transform 1s linear;
  -webkit-transform-style: preserve-3d;
  -webkit-transition: -webkit-transform 1s linear;
}

.inner.rotated {
    transform: rotateY(180deg);
    -webkit-transform: rotateY(180deg);
}
.inner .face {
    position: absolute;
    width: 100%;
    height: 100%;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
}
.face.back {
    border: 2px solid white;
    transform: rotateY(180deg);
    -webkit-transform: rotateY(180deg);
    border-radius: 50%;
    -webkit-border-radius: 50%;
}

JavaScript

$(document).ready(function() {
	$(".qcontainer").on("click", function(e) {
		var p = $(this).find(".back").attr("src");
		console.log(p);
		$(this).find(".inner").addClass("rotated");
	});
})