JSFiddle - React, Tailwind, and code Playground

by kougiland

HTML

<div class="coverflowSlider">
    <div class="flowItem" style="background-image: url(http://www.placehold.it/250x150);"></div>
    <div class="flowItem" style="background-image: url(http://www.placehold.it/250x150);"></div>
    <div class="flowItem" style="background-image: url(http://www.placehold.it/250x150);"></div>
    <div class="flowItem" style="background-image: url(http://www.placehold.it/250x150);"></div>
    <div class="flowItem" style="background-image: url(http://www.placehold.it/250x150);"></div>    
</div>

CSS

.coverflowSlider{
    position:absolute;
    width:940px;
    margin:0 auto;
    height:300px;
    text-align:center;
    line-height: 300px;
    -webkit-perspective: 300px;
    -webkit-transform-style: preserve-3d;
    -moz-perspective: 300px;
    -moz-transform-style: preserve-3d;
}
.flowItem{
    width: 250px;
    height:150px;
    display:inline-block;
    position:absolute;
    -webkit-transition-property: all;
    -webkit-transition-duration: 1s;
    -moz-transition-property: all;
    -moz-transition-duration: 1s;
    -webkit-box-shadow: -1px 1px 8px rgba(0, 0, 0, 0.9);
    /*box-shadow: -1px 1px 8px rgba(0, 0, 0, 0.9);*/
    -webkit-box-reflect: below 0px -webkit-gradient(linear, left top, left bottom, from(transparent),color-stop(0.7, transparent), to(white));
}
.selected{
    -webkit-box-reflect: 0 0 150px 100px rgba(0, 0, 0, 0.8); 
    
}

JavaScript

$(function() {
    $('.coverflowSlider').on('click', '.flowItem', function() {
        transformCovers($(this));
    });
    transformCovers();
});

function transformCovers(centerItem) {
    // this function is just for changing the translateX and rotateY on all items, based on where they are relative to the selected cover.
    var items = $('.coverflowSlider .flowItem');
    if (typeof(centerItem) != "undefined") {
        var selectedItem = centerItem; // chosen item
    } else {
        var selectedItem = items.eq(parseInt(items.length / 2)); //default item
    }
    var leftItems = selectedItem.prevAll('.flowItem');
    var rightItems = selectedItem.nextAll('.flowItem');
    selectedItem.css({
        "-webkit-transform": "translateX(0px) rotateY(0deg) translateZ(0)"
    }).addClass('selected').siblings('.selected').removeClass('selected');
    selectedItem.css({
        "-moz-transform": "translateX(0px) rotateY(0deg) translateZ(0)"
    });

    leftItems.each(function(i) {
        var itemdelta = i + 1;
        $(this).css({
            "-webkit-transform": "translateX(" + ((itemdelta) * -150) + "px) rotateY(40deg) translateZ(0px)"
        });
        $(this).css({
            "-moz-transform": "translateX(" + ((itemdelta) * -150) + "px) rotateY(40deg) translateZ(0px)"
        });
    });
    rightItems.each(function(i) {
        var itemdelta = i + 1;
        $(this).css({
            "-webkit-transform": "translateX(" + ((itemdelta) * 150) + "px) rotateY(-40deg) translateZ(0px)"
        });
        $(this).css({
            "-moz-transform": "translateX(" + ((itemdelta) * 150) + "px) rotateY(-40deg) translateZ(0px)"
        });
    });
}