page turn

HTML

<script src="http://fonts.googleapis.com/css?family=Advent+Pro:400,600,700"></script>
<link rel="stylesheet" href="http://cthulhu.byook.com/css/main_mobile.css">
<link rel="stylesheet" href="http://cthulhu.byook.com/css/bootstrap-responsive.min.css">
<link rel="stylesheet" href="http://cthulhu.byook.com/css/bootstrap.min.css">
<script src="http://cthulhu.byook.com/js/jquery.js"></script>
<script src="http://cthulhu.byook.com/js/jquery.json-2.4.min.js"></script>
<script src="http://cthulhu.byook.com/js/bootstrap.min.js"></script>
<script src="http://cthulhu.byook.com/js/jquery.validate.min.js"></script>
<script src="http://cthulhu.byook.com/js/main_mobile.js"></script>
<div id="page-flip" class="animate">
    <div id="frontface">
        <div class="page">
            <div class="content">
                <div class="shadow">PAGE 1</div>
            </div>
        </div>
    </div>
    <div class="investigation-container">
        <div class="span12">
        PAGE 2
        </div>
    </div>
    <div id="backface">
        <div class="page">
            <div class="content">
                <div class="shadow"></div>
            </div>
        </div>
    </div>
</div>
    
    <a href="#" style="color:#FFF; position:absolute; top:0px; left:0px; z-index:500;" onclick='$("#page-flip").toggleClass("turn"); return false;'>Toggle page turn</a>

CSS

@font-face {
    font-family:'fineliner_scriptregular';
    src: url('http://cthulhu.byook.com/fonts/fineliner_script-webfont.eot');
    src: url('http://cthulhu.byook.com/fonts/fineliner_script-webfont.eot?#iefix') format('embedded-opentype'), url('http://cthulhu.byook.com/fonts/fineliner_script-webfont.woff') format('woff'), url('http://cthulhu.byook.com/fonts/fineliner_script-webfont.ttf') format('truetype'), url('http://cthulhu.byook.com/fonts/fineliner_script-webfont.svg#fineliner_scriptregular') format('svg');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family:'AgencyFBRegular';
    src: url('http://cthulhu.byook.com/fonts/agency_fb.eot');
    src: url('http://cthulhu.byook.com/fonts/agency_fb.eot') format('embedded-opentype'), url('http://cthulhu.byook.com/fonts/agency_fb.woff') format('woff'), url('http://cthulhu.byook.com/fonts/agency_fb.ttf') format('truetype'), url('http://cthulhu.byook.com/fonts/agency_fb.svg#AgencyFBRegular') format('svg');
}

body, html {
    padding:0px;
    margin:0px;
    height:100%;
    max-height:480px;
    width:320px;
    margin-left: auto;
    margin-right:auto;
    background-color:#000;
    overflow:hidden;
}

#investigation, .investigation-dummy {
    margin-top:120px;
    position:absolute;
    top:0px;
    left:0px;
    right:0px;
    bottom:0px;
    z-index:12;
}
#inv_content, .text-dummy {
    width:90%;
    margin-left:auto;
    margin-right:auto;
    font-family:"Advent Pro";
    font-size:12pt;
}

/* ANIMATIONS
 * PAGE FLIP
 */
 #page-flip {
    width:320px;
    height:100%;
    max-height:568px;
}
#page-flip #frontface {
    /*display:none;*/
    position: absolute;
    z-index: 75;
    -webkit-transform-origin: 0px 350px;
    -webkit-transform: translate3d(0px, -350px, 0px) rotate(45deg);
    -moz-transform-origin: 0px 350px;
    -moz-transform: translate3d(0px, -350px, 0px) rotate(45deg);
}
#page-flip.animate #frontface {
    -webkit-transition-timing-function: ease-in-out;
   ...