blongden/test.html

## test.html
<html>
    <head>
        <script type="text/javascript" src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
        <script type="text/javascript" src="http://ricostacruz.com/jquery.transit/jquery.transit.min.js"></script>
        <script type="text/javascript">
            $.fn.flip = function(back, duration) {
                duration = duration || 200;
                front = this;

                $(back).css({transform: 'rotateY(270deg)'});
                $(front).click(function() {
                    $(front).transition({
                        rotateY: '90deg'
                    }, duration, 'in', function() {
                        $(back).show().transition({
                            rotateY: '360deg'
                        }, duration, 'out');
                    });
                });

                $(back).click(function() {
                    $(back).transition({
                        rotateY: '270deg'
                    }, duration, 'in', function() {
                        $(front).show().transition({
                            rotateY: '0deg'
                        }, duration, 'out');
                    });
                });
            }

            $(document).ready(function() {
                $('#page1').flip('#page2');
                $('body').fadeIn();
            });
        </script>
        <style>
            body {
                background: #000;
                margin: 0;
            }
            div {
                position: absolute;
                top: 0px;
                width: 320px;
                height: 480px;
                background-color: #ccc;
                margin: 0px;
                text-align: center;
            }
            #page1 {
                padding-top: 10px;
            }
        </style>
    </head>
    <body style="display: none">
        <div id="page1">
            <img src="http://placekitten.com/300/440" />
        </div>
        <div id="page2">
            <img src="http://placekitten.com/320/480" />
        </div>
    </body>
</html>
	<html>
	<head>
	<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
	<script type="text/javascript" src="http://ricostacruz.com/jquery.transit/jquery.transit.min.js"></script>
	<script type="text/javascript">
	$.fn.flip = function(back, duration) {
	duration = duration \|\| 200;
	front = this;

	$(back).css({transform: 'rotateY(270deg)'});
	$(front).click(function() {
	$(front).transition({
	rotateY: '90deg'
	}, duration, 'in', function() {
	$(back).show().transition({
	rotateY: '360deg'
	}, duration, 'out');
	});
	});

	$(back).click(function() {
	$(back).transition({
	rotateY: '270deg'
	}, duration, 'in', function() {
	$(front).show().transition({
	rotateY: '0deg'
	}, duration, 'out');
	});
	});
	}

	$(document).ready(function() {
	$('#page1').flip('#page2');
	$('body').fadeIn();
	});
	</script>
	<style>
	body {
	background: #000;
	margin: 0;
	}
	div {
	position: absolute;
	top: 0px;
	width: 320px;
	height: 480px;
	background-color: #ccc;
	margin: 0px;
	text-align: center;
	}
	#page1 {
	padding-top: 10px;
	}
	</style>
	</head>
	<body style="display: none">
	<div id="page1">
	<img src="http://placekitten.com/300/440" />
	</div>
	<div id="page2">
	<img src="http://placekitten.com/320/480" />
	</div>
	</body>
	</html>