JSFiddle - React, Tailwind, and code Playground

by AaronLayton

HTML

<div id="overflowContainer">
    <div id="card_container">
        <img src="http://assets15.pokemon.com/assets/cms/img/cards/card_images_web_large/COL1/COL1_EN_1.jpg" width="200" height="279" />
        <img src="http://assets15.pokemon.com/assets/cms/img/cards/card_images_web_large/COL1/COL1_EN_2.jpg" width="200" height="279" />
        <img src="http://assets15.pokemon.com/assets/cms/img/cards/card_images_web_large/COL1/COL1_EN_3.jpg" width="200" height="279" />
        <img src="http://assets15.pokemon.com/assets/cms/img/cards/card_images_web_large/COL1/COL1_EN_4.jpg" width="200" height="279" />
        <img src="http://assets15.pokemon.com/assets/cms/img/cards/card_images_web_large/COL1/COL1_EN_5.jpg" width="200" height="279" />
    </div>
</div>

CSS

#overflowContainer {
    height:402px;
    overflow:hidden;
    width:602px;
    
    -webkit-backface-visibility: hidden;
    -mox-backface-visibility: hidden;
    backface-visibility: hidden;
}
#card_container
{
    height: 400px;
    width: 600px;
    overflow: hidden;
    border: 1px solid #666;
    -webkit-perspective: 500px;
    -moz-perspective: 500px;
}
        
#card_container img
{
    position: absolute;
    display: none;
    top: 30px;
    left: 80px;
}

JavaScript

var dragging = false;
var x = 0;
var y = 0;

var imageDetails = [];

var images = document.getElementsByTagName("img");
for (var i = 0; i < images.length; i++)
{
    images[i].ondragstart = function() {
        return false;
    };
    images[i].style.zIndex = 1000 - i;
    imageDetails.push({x: 120*(i+1)});
    
    var pos = imageDetails[i].x/120;
    imageDetails[i].scale = 1/((pos/5)+1);
    images[i].style.opacity = pos+1;
    images[i].style.MozTransform = "translate3d(" + imageDetails[i].x + "px, 0, 0) rotateY(" + -(5*(pos+1)) + "deg) scale3d(" + imageDetails[i].scale + ", " + imageDetails[i].scale + ", 1)";
    images[i].style.WebkitTransform = "translate3d(" + imageDetails[i].x + "px, 0, 0) rotateY(" + -(5*(pos+1)) + "deg) scale3d(" + imageDetails[i].scale + ", " + imageDetails[i].scale + ", 1)";
    images[i].style.display = "block";
    
    //img.style.WebkitTransform = "translate3d(" + (60*(i+1)+120) + "px, 0, 0) rotateY(" + -(5*i) + "deg) scale3d(" + 1/((i/5)+1) + ", " + 1/((i/5)+1) + ", 1)";
}

console.log(imageDetails);

document.onmousedown = function(e)
{
    dragging = true;
    x = e.pageX;
    y = e.pageY;
}

document.onmouseup = function(e)
{
    dragging = false;
}

document.onmousemove = function(e)
{
    if (dragging)
    {
        var diffX = e.pageX - x;
        x = e.pageX;
        for (var i = 0; i < images.length; i++)
        {
            imageDetails[i].x += diffX;
            var pos = imageDetails[i].x/120;
            imageDetails[i].scale = 1/((pos/5)+1);
            images[i].style.opacity = pos+1;
            images[i].style.MozTransform = "translate3d(" + imageDetails[i].x + "px, 0, 0) rotateY(" + -(5*(pos+1)) + "deg) scale3d(" + imageDetails[i].scale + ", " + imageDetails[i].scale + ", 1)";
            images[i].style.WebkitTransform = "translate3d(" + imageDetails[i].x + "px, 0, 0) rotateY(" + -(5*(pos+1)) + "deg) scale3d(" + imageDetails[i].scale + ", " + imageDetails[i].scale + ", 1)";
        }
    }
}