繞Y軸旋轉(zhuǎn)翻頁效果有問題
為什么改成繞Y軸旋轉(zhuǎn)，翻頁的時(shí)候第一頁卡在那里？不是已經(jīng)繞Y軸轉(zhuǎn)了90度，應(yīng)該看不到才對(duì)啊.....麻煩大神看下代碼。
<!DOCTYPE?html>
?<html>
?<head>
??<meta?charset="UTF-8">
??<title>3D?Calendar</title>
??<style>
?????#my3dspace{
??????-webkit-perspective:800;
??????-webkit-perspective-origin:50%?50%;
?????
??????overflow:?hidden;
?????}
?????#pagegroup{
??????width:400px;
??????height:400px;
??????margin:0?auto;
??????-webkit-transform-style:preserve-3d;
??????position:relative;
?????}
?????.page{
??????width:360px;
??????height:360px;
??????padding:20px;
??????color:white;
??????background-color:?black;
?????????font-weight:bold;
????????font-size:360px;
????????line-height:360px;
????????text-align:center;
???????position:absolute;
?????}
?????
??????
?????#page1{
???????-webkit-transform-origin:left;
???????-webkit-transition:-webkit-transform?1s?linear;
?????}
?????#page2,#page3,#page4,#page5,#page6,#page7{
???
?????????-webkit-transform-origin:left;
????????????-webkit-transition:-webkit-transform?1s?linear;
????????????-webkit-transform:rotateY(90deg);
?????}
?????.operation{
??????text-align:center;
??????margin:40px?auto;
?????}
??</style>
??<script?type="text/javascript">
??var?curIndex=1;
??function?next(){
????if(curIndex==7)
?????return;
??????var?curPage=document.getElementById("page"+curIndex);
??????curPage.style.webkitTransform="rotateY(-90deg)";
??????
??????curIndex++;
??????var?nextPage=document.getElementById("page"+curIndex);
??????nextPage.style.webkitTransform="rotateY(0deg)";
??}
?
??function?previous(){
??if(curIndex==1)
??return;
??var?curPage=document.getElementById("page"+curIndex);
??????curPage.style.webkitTransform="rotateY(90deg)";
??????
??????curIndex--;
??????var?nextPage=document.getElementById("page"+curIndex);
??????nextPage.style.webkitTransform="rotateY(0deg)";
??}
??</script>
?</head>
?<body>
??<div?id="my3dspace">
??<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?id="page7">7</div>
??</div>
??</div>
??<div>
??<a?href="javascript:previous()">previous</a>?<a?href="javascript:next()">next</a>
??</div>
?</body>
?</html>
2016-02-22
我自己試了一下，把next函數(shù)里面對(duì)當(dāng)前頁翻轉(zhuǎn)的角度改成向外76度（原來是90）左右就不會(huì)顯示翻過去的那一頁，請(qǐng)問這是為什么？
function?next(){ ? ??if(curIndex==7) ? ?? return; ??????var?curPage=document.getElementById("page"+curIndex); ??????curPage.style.webkitTransform="rotateY(-76deg)";