JSFiddle - React, Tailwind, and code Playground

HTML

<div id="container"></div>

CSS

body{
    background:black;
}

#container img, #container a {
    padding:0;
    margin:0;
    border:0;
    width:200px;
    height:200px;  
}

#container a {
    -webkit-perspective:200px;
    -moz-perspective:200px;
    perspective:200px;
    float:left;    
    border:1px solid black;
}

.bottom, .top {
    -webkit-transition: -webkit-transform 0.5s;    
    -moz-transition: -moz-transform 0.5s;    
    transition: transform 0.5s;    
}

.bottom {
    -webkit-transform-origin: right bottom;   
    -moz-transform-origin: right bottom;   
    transform-origin: right bottom;   
}

.top{
    -webkit-transform-origin: left top;   
    -moz-transform-origin: left top;   
    transform-origin: left top;   
}

#container .top, #container .bottom {
    height: 100px;
    overflow: hidden;
}

#container .bottom img{
    margin-top: -100px;
}

#container a:hover .bottom {
   -webkit-transform: rotateX( 117deg );    
   -moz-transform: rotateX( 117deg );    
   transform: rotateX( 117deg );    
}

#container a:hover .top {
   -webkit-transform: rotateX( -117deg );    
   -moz-transform: rotateX( -117deg );    
   transform: rotateX( -117deg );    
}

.data {
    position:absolute;
    width:100%;
    height:100%;
    max-width:200px;
    max-height:200px;
    line-height: 197px;
    color:#CCC;
    font-family: Verdana, Tahoma, serif;
    font-size:10px;
    text-align:center;
    background-image: url(http://subtlepatterns.subtlepatterns.netdna-cdn.com/patterns/blackorchid.png);
    opacity:0;
    -webkit-transition:opacity 0.5s linear;
    -moz-transition:opacity 0.5s linear;
    transition:opacity 0.5s linear;
    z-index:-1;
}

#container a:hover .data {
    opacity:1;
}

JavaScript

/****************************************************/
/* CSS3 Example brought to you by PlaceAnything.com */
/****************************************************/

for( var i = 0; i < 30 ; i++){
    $('<a href="#"></a>')
        .append('<div class="data">'+i+'</div>')
        .append('<div class="top"><img></div>')
        .append('<div class="bottom"><img></div>')            
        .appendTo("#container")
        .find('img')
            .attr('src','http://placeanything.com/AlbumArtPorn/200/200/?r='+i);
}
        
// Fallback for browsers without CSS3 3D transformations 

if( typeof document.body.style["-webkit-transform"] === "undefined" &&
    typeof document.body.style["MozTransform"] === "undefined" && 
    typeof document.body.style["transform"] === "undefined"){       
        
        $("#container a").on("mouseenter mouseleave",function(event){
            var action = ( event.type === "mouseenter" ? "hide" : "show" );
            $(this).find("img")[action]();
        });
}