JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://ricostacruz.com/jquery.transit/jquery.transit.js"></script>
<div id="mainContainer">
<div id="img1" class="img">
</div>
<div id="img2" class="img">
</div>
<div id="img3" class="img">
</div>
<div id="img4" class="img">
</div>
<div id="img5" class="img">
</div>
<div id="img6" class="img">
</div>
<div id="img7" class="img">
</div>
<div id="img8" class="img">
</div>
</div>

CSS

.img {
    width: 50px;
    float: left;
    border: 1px solid black;
    height: 50px;
    margin: 3px;
    background-repeat: no-repeat;
    background-color: #000;
    display: inline;
    color: #FFF;
}

#mainContainer {
    overflow:hidden;
    width: 500px;
    background: white;
    border: 0px;
    margin-left: auto ;
    margin-right: auto ;
    float: none;
    display: block;
}

JavaScript

var queue = new Array();

$("#img1").on("hover", function() {
    var delay = 500;
    $("#mainContainer").children('div').each(function(i) {
        var _this = this;
        queue.push(setTimeout(function() {
            animate(_this);
        }, i * delay));
    });
});

function animate(elem) {
    $(elem).css("transition", "500ms all ease-in-out");
    $(elem).css("transform", "perspective(100px) rotate3d(1, 1, 0, 360deg)")
    $(elem).css("background-color", "#fff");
}

function clearQueue() {
    for (index in queue) {
        clearTimeout(queue[index]);
    }        
}

$("#mainContainer").on("mouseleave", function() {
    clearQueue();
    $("#mainContainer").children('div').each(function(i) {
        $(this).css("transition", "0ms all ease-in-out");
        $(this).removeAttr('style');
    });
});