JSFiddle - React, Tailwind, and code Playground

HTML

<div id='stage' style='height: 160px; width: 180px;'>
	<div id='spinner'>
		<div style='-webkit-transform: rotateY(90deg) translateZ(90px); padding: 0 0px; background: red; width: 180px; height: 160px; display: inline-block;' class='rotating'>A</div>
		<div style='-webkit-transform: rotateY(180deg) translateZ(90px); padding: 0 0; background: blue; width: 180px; height: 160px; display: inline-block;'>B</div>
		<div style='-webkit-transform: rotateY(270deg) translateZ(90px); padding: 0 0; background: green; width: 180px; height: 160px; display: inline-block;'>C</div>
		<div style='-webkit-transform: rotateY(360deg) translateZ(90px); padding: 0 0; background: yellow; width: 180px; height: 160px; display: inline-block;' class='rotating'>D</div>
	</div>
</div>

CSS

@-webkit-keyframes spinner {
	from { -webkit-transform: rotateY(0deg); }
	to { -webkit-transform: rotateY(0deg); }
}

@keyframes spinner {
	from {
		-moz-transform: rotateY(0deg);
		-ms-transform: rotateY(0deg);
		transform: rotateY(0deg);
	}
	to {
		-moz-transform: rotateY(0deg);
		-ms-transform: rotateY(0deg);
		transform: rotateY(-360deg);
	}
}

#stage {
	margin: 1em auto;
	-webkit-perspective: 1200px;
	-moz-perspective: 1200px;
	-ms-perspective: 1200px;
	perspective: 1200px;
}

#spinner {
	-webkit-animation-name: spinner;
	-webkit-animation-timing-function: linear;
	-webkit-animation-iteration-count: infinite;
	-webkit-animation-duration: 6s;
	-webkit-animation-play-state: running;
	
	animation-name: spinner;
	animation-timing-function: linear;
	animation-iteration-count: infinite;
	animation-duration: 6s;
	animation-play-state: running;
	
	-webkit-transform-style: preserve-3d;
	-moz-transform-style: preserve-3d;
	-ms-transform-style: preserve-3d;
	transform-style: preserve-3d;
}



#spinner div, #spinner img {
	position: absolute;
	border: 1px solid #ccc;
	background: rgba(255,255,255,0.8);
	box-shadow: inset 0 0 20px rgba(0,0,0,0.2);
}