JSFiddle - React, Tailwind, and code Playground

by Aakash Khapare M

HTML

<div id="cards-container">
    <div class="cards"><img src="http://www.thehindu.com/multimedia/dynamic/01660/vbk-21-kalam_jpg_1660102f.jpg" height="200px"></div>
    <div class="cards"><img src="http://www.learnnext.com/blog/wp-content/uploads/2011/12/Abdul-Kalam2.jpg" height="200px"></div>
    <div class="cards"><img src="http://im.rediff.com/getahead/2009/jun/22sli1.jpg" height="200px"></div>
    <div class="cards"><img src="http://www.allindiablog.org/wp-content/uploads/2015/07/APJ-Abdul-Kalam.jpg" height="200px"></div>
</div>

CSS

#cards-container{
    width: 200px;
    height: 200px;
    background-color: #fff;
    position: relative;
    margin-top: 50px;
    margin-left: auto;
    margin-right: auto;
    line-height: 200px;
    text-align: center;
    -webkit-perspective: 500px;
}
.cards{
    width: 200px;
    height: 200px;
    background-color: #eee;
    position: absolute;
    -webkit-transform-origin: 0% 100%;
    overflow: hidden;
    border: 1px solid #aaa;
    z-index: 10;
}
.cards:even{
    background-color: #000;
}
.swap-to-back{
    color: #fff;
    -webkit-animation-name: animate-to-back;
    -webkit-animation-duration: 2s;
    background-color: red;
}
@-webkit-keyframes animate-to-back{
    55%{
        -webkit-transform: rotate(-110deg) translate(-10px, -20px) rotateX(-10deg);
        z-index: 10;
        -webkit-box-shadow: 0 0 4px 1px #aaa;
    }
    40%{
        -webkit-transform: translate(-5px, -20px) rotateX(0deg);
    }
    60%{
        z-index: 1;
        -webkit-transform: rotate(-100deg) translate(0px, -20px) rotateX(0deg);
    }
    100%{
        -webkit-transform: rotate(0deg) translate(0px, 0px) rotateX(0deg);
        z-index: -10;
    }
}

JavaScript

function moveCard(){
    $(".cards:last-child").addClass("swap-to-back");
    setTimeout(removeAnim, 2000);
}
function removeAnim(){
    $("#cards-container > .cards.swap-to-back").prependTo("#cards-container").removeClass("swap-to-back");
    moveCard();
}
moveCard();