reddit flip

by gravitybox

HTML

<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<link href='http://fonts.googleapis.com/css?family=Montserrat:400,700' rel='stylesheet' type='text/css'>
<div class="container"><div id='reddit-content' class="row"></div></div>

CSS

body {
    background:#ebeff2;
}
.panel {
    margin: 15px auto;
    width: 256px;
    height: 300px;
    position: relative;
    font-size: 1.3em;
    -webkit-perspective: 600px;
    -moz-perspective: 600px;
    font-family:Montserrat;
    color:#777;
    cursor:pointer;
    

}
.panel .front p{
    position:relative;
    height:100%;
    z-index:20;
    background:linear-gradient(to bottom, rgba(255,255,255,1) 0%,rgba(255,255,255,1) 70%,rgba(255,255,255,1) 71%,rgba(255,255,255,.8) 99%);
        padding:20px;

}

.panel .front img {
    position:absolute;
    left:0px;
    bottom:0px;
    width:100%;
        z-index:0;

}
.panel .front {
    position: absolute;
    top: 0;
    z-index: 900;
    width: inherit;
    height: inherit;
    text-align: center;
    background-color:#fff;
    border:1px solid #888;
    border-radius:3px;
    overflow:hidden;
}
.panel .back img {
    position:relative;
    
    width:100%;
}
.panel .back {
    position: absolute;
    top: 0;
    z-index: 800;
    width: inherit;
    height: inherit;
    background-color:#999;
    border:1px solid #777;
    border-radius:3px;
    
}

/* -- make sure to declare a default for every property that you want animated -- */

/* -- general styles, including Y axis rotation -- */
 .panel .front {
    position: absolute;
    top: 0;
    z-index: 900;
    width: inherit;
    height: inherit;
    text-align: center;
    -webkit-transform: rotateX(0deg) rotateY(0deg);
    -webkit-transform-style: preserve-3d;
    -webkit-backface-visibility: hidden;
    -moz-transform: rotateX(0deg) rotateY(0deg);
    -moz-transform-style: preserve-3d;
    -moz-backface-visibility: hidden;
    /* -- transition is the magic sauce for animation -- */
    -o-transition: all .4s ease-in-out;
    -ms-transition: all .4s ease-in-out;
    -moz-transition: all .4s ease-in-out;
    -webkit-transition: all .4s ease-in-out;
    transition: all .4s ease-in-out;
}
.panel.flip .front {
    z-index: 900;
    -webkit-transform:...

JavaScript

        $(document).ready(function () {           
            
            $('#reddit-content').on('click', '.click', function(){
            //$('.click').click(function () {          
                $(this).toggleClass('flip');            
    });    
});
var numcols = 4;
var col = '<div class="col-md-'+ 12/numcols +'">';
var panel = '<div class="click panel">';
var front = '<div class="front"> ';
var back = '<div class="back">';
var close ='</div>';


$.getJSON(
    "http://www.reddit.com/r/pics.json?jsonp=?",

    
function foo(data) {
    $.each(
    data.data.children.slice(1, 10),

    function (i, post) {
        

        $("#reddit-content").append(col + panel + front  + '<p>' + post.data.title + '</p>' + '<img src="' + post.data.url +'"/>' + close + back + '<img src="' + post.data.url +'"/>' +close +close +close);
       // $("#reddit-content").append(back + 'back ' + post.data.title );
        //$("#reddit-content").append(back + '<img src="' + post.data.url +'"/>');
        //$("#reddit-content").append(' < br > ' + post.data.permalink);
        //$("#reddit-content").append(' < br > ' + post.data.ups);
        //$("#reddit-content").append(' < br > ' + post.data.downs);
        //$("#reddit-content").append('</div>');

    })
})

/*
    .success(function () {
    alert("second success");
})
    .error(function () {
    alert("error");
})
    .complete(function () {
    alert("complete");
});

*/