JSFiddle - React, Tailwind, and code Playground

HTML

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

CSS

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

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

JavaScript

$("#img1").mouseenter(function() {
    var delay = 500;
    $("#mainContainer").children('div').each(function(i) {

        $(this).delay(i * delay);
        $(this).transition({
            perspective: '100px',
            rotate3d: '1, 1, 0, 360deg',
            easing: 'snap',
            duration: '250ms'
        }, function() {
            $(this).css("background", "white");
        });
    });

});

$("#mainContainer").bind("mouseleave", function() {
    $("#mainContainer").children('div').each(function(i) {
        $(this).queue([]);
        $(this).stop(true, true);
        $(this).removeAttr("style");
    });
});