JSFiddle - React, Tailwind, and code Playground

HTML

<div class="product-download">
<div id="product-image"><img src="http://placehold.it/300x216" /></div>
<div id="in-situ-image"><img src="http://placehold.it/300x216" /></div>
<div id="product-flyer"><img src="http://placehold.it/300x216" /></div>
<div id="data-sheet"><img src="http://placehold.it/300x216" /></div>
</div>

CSS

body{
	overflow:hidden;
	width:100%;
	margin:0 auto;
}
.product-download {
	position:relative;
	width:934px;
	height:397px;

}
.product-download > div{
	position:absolute;
	display:inline-block;
}
#product-image{
	z-index:6;
}
#in-situ-image{
-webkit-transform: perspective( 600px ) rotateY( -30deg ) translateZ(-100px);
z-index:5;
left:120px;
}
#product-flyer{
-webkit-transform: perspective( 600px ) rotateY( -30deg ) translateZ(-100px);
z-index:4;
left:265px;
}
#data-sheet{
-webkit-transform: perspective( 600px ) rotateY( -30deg ) translateZ(-100px);
z-index:3;
left:410px;
}

JavaScript

$(".product-download div").click(function() {
    // Get the maximum number of items and set the max z-index and the min z-index
    var max_zindex = $(".product-download div").length;
    var min_zindex = 1;
    // Get the item index    
    var index = $(".product-download div").index(this);
    // Fix the z-index
    $(this).css('z-index', max_zindex);
    for(var i=index-1; i>=min_zindex; i--){
        $(".product-download div").eq(i).css('z-index', i);
    }
    for(var i=index+1; i<=max_zindex; i++){
        $(".product-download div").eq(i).css('z-index', i);
    }
    
    $(this).fadeTo('slow').css('-webkit-transform','perspective( 0px ) rotateY( 0deg ) translateZ(0px)');
    $(this).prevAll().fadeTo('slow').css('-webkit-transform','perspective( 600px ) rotateY( 30deg ) translateZ(-100px)');
    $(this).nextAll().fadeTo('slow').css('-webkit-transform','perspective( 600px ) rotateY( -30deg ) translateZ(-100px)');
});