<!DOCTYPE?html>
<head>
<meta?http-equiv="Content-Type"?content="text/html;?charset=utf-8"?/>
<title>三維</title>
<style>
???#my3dspace{
????-webkit-perspective:800;
????-webkit-perspective-origin:50%?50%;
????overflow:hidden;
????}
???#pagegroup{
????width:500px;
????height:500px;
????margin:0?auto;
????
????-webkit-transform-style:-webkit-preserve-3d;
????
????position:relative;
????}
?.page{
??width:400px;
??height:400px;
??padding:20px;
??background-color:red;
??
??color:white;
??
??font-weight:bold;
??font-size:400px;
??line-height:400px;
??text-align:center;
??
??position:relative;
??}???
?#page1{
??-webkit-transform-origin:bottom;
??-wedkit-transition:-webkit-transform?1s?linear;
??}
?#page7,#page6,#page5,#page4,#page3,#page2{
??-webkit-transform-origin:bottom;
??-wedkit-transition:-webkit-transform?1s?linear;
??-wedkit-transform:rotateX(90deg);
??}?
?#op{
??text-align:center;
??margin:40px?auto;
??}??
</style><script?type="text/javascript">????var?curIndex?=?1;?function?next(){??if(curIndex?==?1)?????return;??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(){???if(curIndex?==?1)???return;??????var?curPage?=?document.getElementById("page"+curIndex);???curPage.style.webkitTransform?="rotateX(90deg)";??????curIndex?--;???var?prevPage?=?document.getElementById("page"+curIndex);???prevPage.style.webkitTransform?=?"rotateX(0deg)";?}</script></head><body><div?id="my3dspace">???<div?id="pagegroup">???<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></div><div?id="op">???<a?href="javascript:next()">next</a> <a?href="javascript:prev()">previous</a> ??????</body></html>
2019-06-10
next函數(shù)的判斷是==6,不是==1,另外六個元素的position是absolute不是relative