JSFiddle - React, Tailwind, and code Playground

HTML

<header>
	<div id="logo">
		<div class="front"></div>
		<div class="back"></div>
	</div>
</header>

CSS

header {
		margin-bottom				: 40px;
		margin-left					: 300px;
		width						: 100px;
		height						: 100px;

		-webkit-transform-style		: preserve-3d;
		-moz-transform-style		: preserve-3d;
		-ms-transform-style			: preserve-3d;
		transform-style				: preserve-3d;

		-webkit-perspective			: 500;
		-moz-perspective			: 500;
		-ms-perspective				: 500;
		perspective					: 500;
}

#logo,
#logo>div {
		width						: inherit;
		height						: inherit;
		-webkit-transition			: -webkit-transform 0.5s ease;
		-moz-transition				: transform 0.5s ease;
		-ms-transition				: transform 0.5s ease;
		transition					: transform 0.5s ease;
}

#logo {
		box-shadow					: 5px 5px 10px;
		border-radius				: 50%;
		padding						: 5px;
		-webkit-transform-style		: preserve-3d;
		-moz-transform-style		: preserve-3d;
		-ms-transform-style			: preserve-3d;
		transform-style				: preserve-3d;
}

#logo>div {
		position					: absolute;
		-webkit-backface-visibility	: hidden;
		-moz-backface-visibility	: hidden;
		-ms-backface-visibility		: hidden;
		backface-visibility			: hidden;
}

.front {
		background					: url('face.png');
		-webkit-transform			: rotateY(0deg);
		-moz-transform				: rotateY(0deg);
		-ms-transform				: rotateY(0deg);
		transform					: rotateY(0deg);
}

.back {
		background					: url('pile.png');
		-webkit-transform			: rotateY(180deg);
		-moz-transform				: rotateY(180deg);
		-ms-transform				: rotateY(180deg);
		transform					: rotateY(180deg);
}

header:hover #logo,
header:active #logo {
		-webkit-transform			: rotateY(180deg);
		-moz-transform				: rotateY(180deg);
		-ms-transform				: rotateY(180deg);
		transform					: rotateY(180deg);
}