JSFiddle - React, Tailwind, and code Playground

HTML

<a href=# onclick="rotate(-72);">Previous</a>&nbsp;<a href=# onclick="rotate(+72);">Next</a>
<div id="Carousel">
	<div id="Spinner">
		<img class="face f0" src="img/test1.jpg" />
		<img class="face f1" src="img/test2.jpg" />
		<img class="face f2" src="img/test3.jpg" />
		<img class="face f3" src="img/test4.jpg" />
		<img class="face f4" src="img/test5.jpg" />
	</div>
</div>

CSS

#Carousel {
	display: block;
	margin:100px auto 20px auto;
}

#Spinner {
	position: relative;
	margin: 0 auto;
	height: 350px;
	width: 500px;
}

#Carousel .face {
	position: absolute;
	height: 350px;
	width: 500px;
	transform-origin: 50% 50% -250px;
	transition: all 1.0s ease-in-out;
}
#Carousel img {
	width: 500px;
	box-shadow: 0 0 0 1px #000;
}

#Spinner .f0 {
	transform: perspective(1000px) rotateY(0deg) translateZ(95px);
}
#Spinner .f1 {
	transform: perspective(1000px) rotateY(72deg) translateZ(95px);
}
#Spinner .f2 {
	transform: perspective(1000px) rotateY(144deg) translateZ(95px);
}
#Spinner .f3 {
	transform: perspective(1000px) rotateY(216deg) translateZ(95px);
}
#Spinner .f4 {
	transform: perspective(1000px) rotateY(288deg) translateZ(95px);
}

JavaScript

var elements = $('.face');
var rotates = [0, 72, 144, 216, 288];

function rotate(deg)
{
	elements.each(function(index)
	{
		rotates[index] = rotates[index] + deg;
		$(this).css('transform', 'perspective(1000px) rotateY(' + rotates[index] + 'deg) translateZ(95px)');
	});
}