HTML css实现翻页效果,关于CSS3实现翻页特效

为什么我的代码我检查了几遍，还是没有翻页的效果，麻烦哪位帮帮我，而且我不知道为什么翻页的默认数字是3，不应该curIndex的值是1页面最初默认显示的是page1的内容1吗？

制作翻页效果

#my3dpage{

-webkit-perspective:800px;

-webkit-perspective-origin:50% 50%;

overflow: hidden;

}

#pagegroup{

width:400px;

height:400px;

margin:0px auto;

position: relative;

-webkit-transform-style:preserve-3d;

}

.page{

width: 360px;

height: 360px;

padding: 20px;

line-height: 360px;

text-align: center;

font-weight: bold;

font-size: 360px;

background-color: black;

color: white;

position: absolute;

}

#page1{

-webkit-transform-origin:bottom;

-webkit-transition:-webkit-transform 1s linear;

}

#page2,#page3,#page4,#page5,#page6{

-webkit-transform-origin:bottom;

-webkit-transition:-webkit-transform 1s linear;

-webkit-transform:rotateX(90deg);

}

#op{

margin: 0 auto;

text-align: center;

}

var curIndex=1;

if (curIndex==6) {

return;

}

function next(){

var curIndex=document.getElementsById("pag"+curIndex);

curIndex.style.webkitTransform="rotateX(-90deg)";

curIndex++;

var nextpage=document.getElementsById("page"+curIndex);

nextpage.style.webkitTransform="rotateX(0deg)";

}

if (curIndex==1) {

return;

}

function pre(){

var curIndex=document.getElementsById("page"+curIndex);

curIndex.style.webkitTransform="rotateX(90deg)";

curIndex--;

var prepage=document.getElementsById("page"+curIndex);

prepage.style.webkitTransform="rotateX(0deg)"

}

1

2

3

4

5

6

next

previous