为什么我的只执行两张
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>3d翻页</title>
</head>
<style type="text/css">
#page3d{ -webkit-perspective:800px; -webkit-perspectiv-origin:50% 50%;overflow: hidden;}
#pagegroup{ width: 400px;height: 400px; margin: 0 auto; position: relative;
-webkit-transform-style: -webkit-preserve-3d;
-moz-transform-style: preserve-3d;
-ms-transform-style: preserve-3d;
transform-style: preserve-3d;}
.page{ position: absolute; width: 400px; height: 400px; line-height: 400px; text-align: center; background-color: #000; color: #fff; font-size: 300px; font-family: "微软雅黑"}
#page1{
-webkit-transform-origin: bottom;
-moz-transform-origin: bottom;
-ms-transform-origin: bottom;
-o-transform-origin: bottom;
transform-origin: bottom;
-webkit-transition: all 1s ease-in;
-o-transition: all 1s ease-in;
transition: all 1s ease-in;
}
#page2,.page3,.page4,.page5,.page6{
-webkit-transform-origin: bottom;
-moz-transform-origin: bottom;
-ms-transform-origin: bottom;
-o-transform-origin: bottom;
transform-origin: bottom;
-webkit-transition: all 1s ease-in;
-o-transition: all 1s ease-in;
transition: all 1s ease-in;
-webkit-transform: rotateX(90deg);
-ms-transform: rotateX(90deg);
-o-transform: rotateX(90deg);
transform: rotateX(90deg);
}
#opration{ text-align: center;}
</style>
<script type="text/javascript">
var curIndex=1;
function next(){
var curpage=document.getElementById("page"+curIndex);
curpage.style.webkitTransform="rotateX(-90deg)";
curIndex++;
var nextpage=document.getElementById('page'+curIndex);
nextpage.style.webkitTransform="rotateX(0deg)";
}
function prev(){}
</script>
<body>
<div id="page3d">
<div id="pagegroup">
<div id="page1">1</div>
<div id="page2">2</div>
<div id="page3">3</div>
<div id="page4">4</div>
<div id="page5">5</div>
<div id="page6">6</div>
</div>
</div>
<div id="opration">
<a href="javascript:next()">next</a>
<a href="javascript:prev()">previous</a>
</div>
</body>
</html>
