JavaScript中transform实现数字翻页效果

 

 1

 2

 3

 4

 5

 6

 next 

 prev

 var curIndex = 1;

 function next(){

 if(curIndex==6)

 return;

 var curPage = document.getElementById("page"+curIndex);

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

 curPage.style.transform = "rotateX(90deg)";

 curIndex ++;

 var nextPage = document.getElementById("page"+curIndex);

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

 nextPage.style.transform="rotateX(0deg)";

 }

 function prev(){

 if(curIndex==1)

 return;

 var curPage =document.getElementById("page"+curIndex);

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

 curPage.style.transform="rotateX(-90deg)";

 curIndex --;

 var prevPage = document.getElementById("page"+curIndex);

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

 prevPage.style.transform="rotateX(0deg)";

 }