<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>3D_1</title>
<style>
.container {
overflow: hidden;
-webkit-perspective: 800;
-webkit-perspective-origin: 50% 50%;
}
.pages {
overflow: hidden;
width: 400px;
height: 400px;
margin: 0 auto;
position: relative;
-webkit-transform-style: preserve-3d;
}
.page {
width: 360px;
height: 360px;
padding: 20px;
background-color: #000;
color: #fff;
font-weight: bold;
font-size: 360px;
line-height: 360px;
text-align: center;
position: absolute;
-webkit-transform-origin: bottom;
-webkit-transition: -webkit-transform 1s linear;
}
.buttons {
margin: 0 auto;
text-align: center;
}
</style>
</head>
<body>
<div class="container" >
<div class="pages" id="pages">
<div class="page" id="page1">1</div>
<div class="page" id="page2">2</div>
<div class="page" id="page3">3</div>
<div class="page" id="page4">4</div>
<div class="page" id="page5">5</div>
<div class="page" id="page6">6</div>
<div class="page" id="page7">7</div>
<div class="page" id="page8">8</div>
<div class="page" id="page9">9</div>
</div>
<div class="buttons">
<a href="javascript:;" id="prev">prev</a>
<a href="javascript:;" id="next">next</a>
</div>
</div>
<script>
;(function() {
'use strict';
function Page( pages, prev, next ) {
this.pages = pages;
this.count = this.pages.length;
this.prev = prev;
this.next = next;
this.current = 0;
}
Page.prototype.init = function() {
// 初始化位置
for( var i = 0; i < this.count; i++ ) {
if( i == this.current ) {
} else {
this.pages[i].style.webkitTransform = 'rotateX( -90deg )';
}
}
// 初始化上下翻页时间
this.next.onclick = this.toNext.call( null, this );
this.prev.onclick = this.toPrev.call( null, this );
}
Page.prototype.toNext = function( obj ) {
return function() {
if( obj.current >= obj.count - 1 ) return false;
obj.pages[obj.current].style.webkitTransform = 'rotateX( 90deg )';
obj.current++;
obj.pages[obj.current].style.webkitTransform = 'rotateX( 0deg )';
}
}
Page.prototype.toPrev = function( obj ) {
return function() {
if( obj.current <= 0 ) return false;
obj.pages[obj.current].style.webkitTransform = 'rotateX( -90deg )';
obj.current--;
obj.pages[obj.current].style.webkitTransform = 'rotateX( 0deg )';
}
}
var pages_parent = document.getElementById( 'pages' ),
pages = pages_parent.getElementsByTagName( 'div' ),
prev = document.getElementById( 'prev' ),
next = document.getElementById( 'next' );
var page = new Page( pages, prev, next );
page.init();
})();
</script>
</body>
</html>
