Create a 3D "cube carousel" using CSS3 transforms

cube-carousel.css

#transparency {
		text-align: center;
}

#controls span {
		padding-right: 2em;
		cursor: pointer;
}

#cubeContainer {
		-webkit-perspective: 800;
		-moz-perspective: 800px;
		-ms-perspective: 800;
		perspective: 800;
		-webkit-perspective-origin: 50% 100px;
		-moz-perspective-origin: 50% 100px;
		-ms-perspective-origin: 50% 100px;
		perspective-origin: 50% 100px;
		margin: 50px auto 20px auto;
		width: 450px;
		height: 400px;
}

#cubeContainer #spinner {
		position: relative;
		margin: 0 auto;
		height: 281px;
		width: 450px;
		-webkit-transform-style: preserve-3d;
		-moz-transform-style: preserve-3d;
		-ms-transform-style: preserve-3d;
		transform-style: preserve-3d;
		-webkit-transform-origin: 50% 100px 0;
		-moz-transform-origin: 50% 100px 0;
		-ms-transform-origin: 50% 100px 0;
		transform-origin: 50% 100px 0;
		-webkit-transition: all 1.0s ease-in-out;
		-moz-transition: all 1.0s ease-in-out;
		-ms-transition: all 1.0s ease-in-out;
		transition: all 1.0s ease-in-out;
}

#cubeContainer #Ycube,
#cubeContainer #Zcube {
		-webkit-transform-style: preserve-3d;
		-moz-transform-style: preserve-3d;
		-ms-transform-style: preserve-3d;
		transform-style: preserve-3d;
}

#cubeContainer .face {
		position: absolute;
		height: 281px;
		width: 450px;
		padding: 0px;
}

#spinner .one {
		-webkit-transform: translateZ(225px);
		-moz-transform: translateZ(225px);
		-ms-transform: translateZ(225px);
		transform: translateZ(225px);
}

#spinner .two {
		-webkit-transform: rotateY(90deg) translateZ(225px);
		-moz-transform: rotateY(90deg) translateZ(225px);
		-ms-transform: rotateY(90deg) translateZ(225px);
		transform: rotateY(90deg) translateZ(225px);
}

#spinner .three {
		-webkit-transform: rotateY(180deg) translateZ(225px);
		-moz-transform: rotateY(180deg) translateZ(225px);
		-ms-transform: rotateY(180deg) translateZ(225px);
		transform: rotateY(180deg) translateZ(225px);
}

#spinner .four {
		-webkit-transform: rotateY(-90deg) translateZ(225px);
		-moz-transform: rotateY(-90deg) translateZ(225px);
		-ms-transform: rotateY(-90deg) translateZ(225px);
		transform: rotateY(-90deg) translateZ(225px);
}

.trans {
		opacity: 0.8;
}

cube-carousel.html

<!-- Check the article at: https://imelgrat.me/css/css-transforms-animations/ -->
<p id="transparency" class="selected">Click me to toggle transparency</p>
<div id="cubeContainer">
	<div id="spinner" style="">
		<div class="face one"> <img src="https://res.cloudinary.com/imelgrat/image/upload/v1504180844/css3-cube-1_je2icq.jpg" class="trans"> </div>
		<div class="face two"> <img src="https://res.cloudinary.com/imelgrat/image/upload/v1504180844/css3-cube-2_xddf2i.jpg" class="trans"> </div>
		<div class="face three"> <img src="https://res.cloudinary.com/imelgrat/image/upload/v1504180844/css3-cube-3_vwfxhw.jpg" class="trans"> </div>
		<div class="face four"> <img src="https://res.cloudinary.com/imelgrat/image/upload/v1504180844/css3-cube-4_ibdt2z.jpg" class="trans"> </div>
	</div>
</div>

cube-carousel.js

$(document).ready(function() {
		var index = 0;
		setInterval(function() {
				$("#spinner").css("transform", "rotateY(" + (index * -90) + "deg)");
				index++;
		}, 2000);

		$("#transparency").click(function() {
				$("#spinner img").toggleClass("trans");
				$(this).toggleClass("selected");
		});

});