翻书效果 额 感觉翻得动作还是有些不自然
<!DOCTYPE HTML>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript" src="./module/jquery/jquery-2.0.3.min.js"></script>
<title>3d page 翻书</title>
<style>
#my3dspace{
/* 设置视口离3d物体有800px远 */
-webkit-perspective: 800;
/* 设置视点， 50% 50%正好为屏幕中间， 意味着屏幕
中间看过去离着800px的一个3d物体 */
-webkit-perspective-oringn: 50% 50%;
overflow: hidden;
}
#pageground{
width: 400px;
height: 400px;
margin:0 auto;
/* 激活物体以3d的模式进行transform， 多了个z轴坐标 */
-webkit-transform-style: preserve-3d;
position:relative;
}
.page{
width: 360px;
height: 360px;
padding: 20px;
background: black;
color: white;
font-weight: bold;
font-size: 360px;
line-height: 360px;
text-align: center;
position: absolute;
border:1px solid white;
}
#page1{
-webkit-transform-origin: left;
-webkit-transition:-webkit-transform 1s linear;
}
#page2,#page3,#page4,#page5,#page6{
-webkit-transform-origin: left;
-webkit-transition:-webkit-transform 1s linear;
-webkit-transform: rotateY(1deg);
}
#op{
text-align: center;
margin-top:30px;
}
</style>
</head>
<body>
<div id="my3dspace">
<div id="pageground">
<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>
</div>
<div id="op">
<a href="javascript:next()">next</a>
<a href="javascript:prev()">previous</a>
</div>
<script>
var curIndex = 1;
function next(){
if(curIndex == 6){
return;
}
//获得当前显示的页面， 并且让他朝着屏幕外面翻滚90度
var curPage = document.getElementById("page" + curIndex);
curPage.style.webkitTransform = "rotateY(-180deg)";
//获取下一个page，翻滚90度
curIndex++;
var nextPage = document.getElementById("page" + curIndex);
nextPage.style.webkitTransform = "rotateY(0deg)";
}
function prev(){
if(curIndex == 1){
return;
}
//获得当前显示的页面， 并且让他朝着屏幕外面翻滚1度
var curPage = document.getElementById("page" + curIndex);
curPage.style.webkitTransform = "rotateY(1deg)";
//获取前一个page，翻滚90度
curIndex--;
var nextPage = document.getElementById("page" + curIndex);
nextPage.style.webkitTransform = "rotateY(0deg)";
}
</script>
</body>
</html>
