JSFiddle - React, Tailwind, and code Playground

by Christian Bonato

HTML

<div class="container">
    <div class="qcontainer" style="top:5px; left:100px">
        <div class="inner">
            <img src="https://dl.dropboxusercontent.com/u/240178989/xmas/img/qmark.png" class="front face" />
            <img src="https://dl.dropboxusercontent.com/u/240178989/xmas/img/jona.jpg" 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;
  -webkit-transition: transform 1s;
  transform-style: preserve-3d;
  -webkit-transition: transform 1s;
    
    -webkit-backface-visibility: hidden; /* Chrome, Safari, Opera */
   	backface-visibility: hidden;
}

.inner.rotated {
    transform: rotateY(180deg);
    -webkit-transform: rotateY(180deg);
}
.inner .face {
    position: absolute;
    width: 100%;
    height: 100%;

}
.face.back {
    display: block;
    transform: rotateY(180deg);
    -webkit-transform: rotateY(180deg);
    box-sizing: border-box;
    border-radius: 50%;
    -webkit-border-radius: 50%;
    border: 2px solid white;
}

JavaScript

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