Fast development of pretty HTML design with CSS3 "opening" effect.

So I created a little service (v.1.0) in Node.JS where you can get categorized but random images for your HTML designs called PlaceAnything; lets create something cool with it and a little bit of CSS3. Check out the final result if you want.

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);
}

Don't get exited, AlbumArtPorn is just a collection by Reddit users of album art.
Now the CSS that includes the prefixes for Firefox and Webkit browsers.

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;
}

This is just an example but for the sake of good practices lets add a fallback for browsers who don't support 3D CSS transformations (remember that IE9 does not support 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]();
        });
}​

Don't forget to check out PlaceAnything; very useful for random but on-topic HTML placeholders.
Take care.