css 3D 翻頁效果

最近在慕課網上學習css3的3D效果，主要用到perspctive,perspective-origin  transform-style:presersve-3d,

perspective：800 主要是創造一個3D場景,800指的是從屏幕看3D場景的距離，其子元素會得到透視效果，而不是元素自己

perspective-origin：50% 50%  看3D場景的位置，從正中心觀看,默認（50% 50%）

transform-style:presersve-3d  使被轉換的子元素保留其3D轉換

transform-origin: x-axis y-axis z-axis，默認（50%,50%,0）

<div class="my3dspace">
 	<div class="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>
 <a href="javascript:next();">next</a> <a href="javascript:pre();">pre</a>

.my3dspace{-webkit-perspective:800;overflow:hidden;}
.pagegroup{width:400px;height:400px;margin:0 auto;-webkit-transform-style:preserve-3d;position:relative;}
.page{position:absolute;width:360px;height:360px;padding:20px;box-sizing:content-box;font-size:100px;text-align:center;line-height:380px;background:#333;color:#fff;}
#page1{-webkit-transform-origin:bottom;-webkit-transition:-webkit-transform 1s linear;}
#page2, #page3, #page4, #page5, #page6{-webkit-transform-origin:bottom;-webkit-transform:rotateX(90deg);-webkit-transition:-webkit-transform 1s linear;}

<script>
var curindex=1
function next(){
  if(curindex==6) return;
  var curentElement=document.getElementById("page"+curindex);
  curentElement.style.webkitTransform="rotateX(-90deg)";
  curindex++;
  var curentElement=document.getElementById("page"+curindex);
  curentElement.style.webkitTransform="rotateX(0deg)";
}
function pre(){
 if(curindex==1) return;
  var curentElement=document.getElementById("page"+curindex);
  curentElement.style.webkitTransform="rotateX(90deg)";
  curindex--;
  var curentElement=document.getElementById("page"+curindex);
  curentElement.style.webkitTransform="rotateX(0deg)";
	
}

</script>