JSFiddle - React, Tailwind, and code Playground

by Ken Z

HTML

<div class="product-download">
    <div id="product-image">
        <img src="//placehold.it/360x259" /> <span class="download-title">Product Image</span>

    </div>
    <div id="in-situ-image">
        <img src="//placehold.it/360x259" /> <span class="download-title">In-Situ Image</span>

    </div>
    <div id="product-flyer">
        <img src="//placehold.it/360x259" /> <span class="download-title">Product Flyer</span>

    </div>
    <div id="data-sheet">
        <img src="//placehold.it/360x259" /> <span class="download-title">Data Sheet</span>

    </div>
</div>

CSS

body {
    width:100%;
}
.product-download {
    position:relative;
    width:900px !important;
    height:397px;
    margin: 0 auto;
    transform: perspective(0px) rotateY(0deg) translateZ(0px);
    -ms-transform: perspective(0px) rotateY(0deg) translateZ(0px);
    -moz-transform: perspective(0px) rotateY(0deg) translateZ(0px);
    -webkit-transform: perspective(0px) rotateY(0deg) translateZ(0px);
    cursor:pointer;
    margin-top:50px;
    margin-left:30px;
}
.product-download > div {
    width:360px;
    height:289px;
    position:absolute;
    display:inline-block;
    transition: all 1s;
}
#product-image {
    z-index:9999;
    transform: perspective(0px) rotateY(0deg) translateZ(0px);
    -ms-transform: perspective(0px) rotateY(0deg) translateZ(0px);
    -moz-transform: perspective(0px) rotateY(0deg) translateZ(0px);
    -webkit-transform: perspective(0px) rotateY(0deg) translateZ(0px);
}
#in-situ-image {
    transform: perspective(600px) rotateY(-30deg) translateZ(-100px);
    -ms-transform: perspective(600px) rotateY(-30deg) translateZ(-100px);
    -moz-transform: perspective(600px) rotateY(-30deg) translateZ(-100px);
    -webkit-transform: perspective(600px) rotateY(-30deg) translateZ(-100px);
    z-index:5;
    left:150px;
}
#product-flyer {
    transform: perspective(600px) rotateY(-30deg) translateZ(-100px);
    -ms-transform: perspective(600px) rotateY(-30deg) translateZ(-100px);
    -moz-transform: perspective(600px) rotateY(-30deg) translateZ(-100px);
    -webkit-transform: perspective(600px) rotateY(-30deg) translateZ(-100px);
    z-index:4;
    left:330px;
}
#data-sheet {
    transform: perspective(600px) rotateY(-30deg) translateZ(-100px);
    -ms-transform: perspective(600px) rotateY(-30deg) translateZ(-100px);
    -moz-transform: perspective(600px) rotateY(-30deg) translateZ(-100px);
    -webkit-transform: perspective(600px) rotateY(-30deg) translateZ(-100px);
    z-index:3;
    left:510px;
}
.download-title {
    width:300px;
   ...

JavaScript

$('.product-download div').click(function () {
    $(this).fadeTo('slow').css({
        'transform': 'perspective( 0px ) rotateY( 0deg ) translateZ(0px)',
            '-ms-transform': 'perspective( 0px ) rotateY( 0deg ) translateZ(0px)',
            '-webkit-transform': 'perspective( 0px ) rotateY( 0deg ) translateZ(0px)'
    }).css('z-index', '9999');
    $(this).prevAll().fadeTo('slow').css({
        'transform': 'perspective( 600px ) rotateY( 30deg ) translateZ(-100px)',
            '-ms-transform': 'perspective( 600px ) rotateY( 30deg ) translateZ(-100px)',
            '-webkit-transform': 'perspective( 600px ) rotateY( 30deg ) translateZ(-100px)'
    }).css('z-index', '1');

    $(this).nextAll().each(function (index) {
        $(this).fadeTo('slow').css({
            'transform': 'perspective( 600px ) rotateY( -30deg ) translateZ(-100px)',
                '-ms-transform': 'perspective( 600px ) rotateY( -30deg ) translateZ(-100px)',
                '-webkit-transform': 'perspective( 600px ) rotateY( -30deg ) translateZ(-100px)'
        }).css('z-index', '-' + index);




    });
    $('.download-title').css('display', 'none');
    $(this).children('span').eq(0).css('display', 'block');
    event.preventDefault();
  
    if ($(this).css('z-index') == 9999) {
        event.preventDefault();
        window.open('//placehold.it/200x200&text=DOWNLOAD', '_blank');
    }
});