page flip

by DoubleYo

HTML

<div id="anim_zone">
    <div class="panel green"></div>
    <div class="panel red"></div>
    <div class="panel blue"></div>
    <div class="panel gray"></div>
</div>

CSS

#anim_zone {
    position:relative;
    width 500px;
    height:500px;
    -webkit-perspective: 1000;
}
.panel {
    position:absolute;
    top:0;
    left:100px;
    width: 300px;
    height: 200px;
    -webkit-transform: translate3d(0, 0, 0) rotateX(180deg);
    -webkit-transform-style: preserve-3d;
}

.green{background-color:green;}
.red{background-color:red;}
.blue{background-color:blue;}
.gray{background-color:gray;}

.folding {
    -webkit-transform: translate3d(0, 200px, 0) rotateX(0deg);
    -webkit-transition: -webkit-transform 1s linear;
}

.green.folding{z-index:4;}
.red.folding{z-index:3;}
.blue.folding{z-index:2;}
.gray.folding{z-index:1;}

JavaScript

$('.panel').click(function() {
    $(this).addClass('folding');
});