<style>
???#environment{
????perspective:?800px;
????perspective-origin:?50%?50%;
????overflow:?hidden;
???}
???#pagegroup{
????position:?relative;
????margin:?0?auto;
????width:?400px;
????height:?400px;
????transform-style:?preserve-3d;
???}
???.page{
????width:?360px;
????height:?360px;
????background-color:?#000000;
????color:?white;
????padding:?19px;
????font-weight:?bold;
????font-size:?360px;
????line-height:?360px;
????text-align:?center;
????position:?absolute;
???}
???#page1{
????-webkit-perspective-origin:?bottom;
????transition:?transform?1s?linear;
???}
???#page2,?#page3,?#page3,?#page4,?#page5,?#page6{
????-webkit-perspective-origin:?bottom;
????transform:?rotateX(90deg);
????transition:?transform?1s?linear;
???}
???#op{
????padding:?20px;
????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(){
????????var?curPage=document.getElementById("page"+curIndex);
????????curPage.style.webkitTransform="rotateX(90deg)";
????????curIndex--;
????????var?nextPage=document.getElementById("page"+curIndex);
????????nextPage.style.webkitTransform="rotateX(0deg)";
???????}*/
??</script>
?</head>
?<body>
??<div?id="environment">
???<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>
??</div>
??<div?id="op">
??????<a?href="javascript:next()">next</a> <a?href="javascript:prev()">prev</a>
??</div>
?</body>
2018-06-15
? ? 不好意思說錯(cuò)了perspective-origin:?50%?50%; 沒問題
有問題的是#page1～6里面的perspective-origin應(yīng)該是transform-origin
2018-06-15
??perspective-origin:?50%?50%;你設(shè)置的就是中間，你應(yīng)該設(shè)置perspective-origin: bottom