怎么沒有出來(lái) 我用的是火狐
<!DOCTYPE html>
<html>
<head>
?? ?<meta charset="UTF-8">
?? ?<title>3d 數(shù)字變換</title>
?? ?<style type="text/css">
?? ?.box{-moz-perspective:800px;
?? ??? ?-moz-perspective-orign:50% 50%;
?? ??? ?overflow: hidden;}
?? ??? ?#pagegroup{
?? ??? ??? ?width:400px;height: 400px;
?? ??? ??? ?-moz-transform-style:preserve-3d;
?? ??? ??? ?/*position: relative;*/
?? ??? ??? ?margin:0 auto;
?? ??? ?}
?? ??? ?.page{width:360px;height: 360px; background-color: black;font-size: 360px;line-heignt:360px;color: white; text-align: center;/*position: absolute;*/
?? ??? ?}
?? ??? ?#page1{-moz-transform-orign:bottom;
?? ??? ??? ?-moz-transition:bottom 2s linear;}
??????? #page2,#page3,#page4,#page5,#page6{
?????? ??? ?-moz-transform-orign:bottom;
?????? ??? ?-moz-transition:bottom 2s linear;
?????? ??? ?-moz-transform:rotateX(90deg);
??????? }
??????? .op{text-align:center}
?? ?</style>
?? ?<script type="text/javascript">
?? ?
?var curIndex = 1;
function next(){
if(curIndex==6)
{
return;
}
var curPage = document.getElementById("page"+curIndex);
curPage.style.mozTransform = "rotateX(-90deg)";
?
curIndex++;
var nextPage = document.getElementById("page"+curIndex);
nextPage.style.mozTransform = "rotateX(0deg)";
}
function pre(){
if(curIndex==1)
{
return;
}
var curPage = document.getElementById("page"+curIndex);
curPage.style.mozTransform = "rotateX(90deg)";
?
curIndex--;
var nextPage = document.getElementById("page"+curIndex);
nextPage.style.mozTransform = "rotateX(0deg)";
}
?? ?</script>
</head>
<body>
<div>
?? ?<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>
</div>
<div>
?? ?<a href="javascript:next()">下一張</a>
?? ?<a href="javascript:pre()">上一張</a>
</div>
</body>
</html>
2015-12-25
<!DOCTYPE?html> <html> ????<head> ????????<meta?charset="utf-8"> ????????<title></title> ????????<style?type="text/css"> ????????????#my3dspace{ ????????????-webkit-perspective:?800; ????????????-webkit-perspective-origin:?50%?50%; -moz-perspective:?800; ????????????-moz-perspective-origin:?50%?50%; ????????????overflow:hidden; ????????} ????????#pagegroup{ ????????????width:400px; ????????????height:400px; ????????????margin:0?auto; ????????????-webkit-transform-style:preserve-3d; ???????????-moz-transform-style:preserve-3d; transform-style:preserve-3d; ????????????position:?relative; ????????} ????????.page{ ????????????width:360px; ????????????height:360px; ????????????padding:20px; ????????????background-color:?black; ????????????color:white; ????????????font-weight:bold; ????????????font-size:360px; ????????????line-height:360px; ????????????text-align:center; ????????????position:absolute; ????????} ????????#page1{ ????????????-webkit-transform-origin:bottom; ????????????-webkit-transition:?-webkit-transform?1s?linear; ?????????????-moz-transform-origin:bottom; ????????????-moz-transition:?transform?1s?linear; ?????????????transform-origin:bottom; ????????????transition:?transform?1s?linear; ????????} ????????#page2,#page3,#page4,#page5,#page6{ ????????????-webkit-transform-origin:bottom; ????????????-webkit-transition:?-webkit-transform?1s?linear; ????????????-webkit-transform:?rotateX(90deg); ????????????-moz-transform-origin:bottom; ????????????-moz-transition:?transform?1s?linear; ????????????-moz-transform:?rotateX(90deg); ????????} ????????#op{ ????????????text-align:center; ????????????margin:?40px?auto; ????????} ????????</style> ????</head> ????<script?type="text/javascript"> ???????? ????????var?curIndex=1; ????????function?next(startPage,endPage){ ????????????if(curIndex==endPage){ ????????????????for(var?i=startPage;i<endPage+1;){ ????????????????????document.getElementById("page"+[i]).style.webkitTransform="rotateX(90deg)"; ????????????????????i++; ????????????????} ????????????????document.getElementById("page"+startPage).style.webkitTransform="rotateX(0deg)"; ????????????????curIndex=startPage; ????????????}else{ ????????????var?cur?=?document.getElementById("page"+curIndex); ????????????cur.style.webkitTransform="rotateX(-90deg)"; ????????????cur.style.MozTransform="rotateX(-90deg)"; ????????????cur.style.transform="rotateX(-90deg)"; ????????????curIndex++; ????????????var?next?=?document.getElementById("page"+curIndex); ????????????next.style.webkitTransform="rotateX(0deg)"; ????????????next.style.MozTransform="rotateX(0deg)"; ????????????next.style.transform="rotateX(0deg)"; ????????????} ????????} ????????function?prev(startPage,endPage){ ????????????if(curIndex==startPage){ ????????????????for(var?i=endPage-1;i>startPage-1;){ ????????????????????document.getElementById("page"+[i]).style.webkitTransform="rotateX(-90deg)"; ????????????????????i--; ????????????????} ????????????????document.getElementById("page"+endPage).style.webkitTransform="rotateX(0deg)"; ????????????????curIndex=endPage; ????????????}else{ ????????????var?cur?=?document.getElementById("page"+curIndex); ????????????cur.style.webkitTransform="rotateX(90deg)"; ????????????curIndex--; ????????????var?prev?=?document.getElementById("page"+curIndex); ????????????prev.style.webkitTransform="rotateX(0deg)"; ????????????} ????????} ????</script> ????<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> ????</div> ????<div?id="op"> ????????<a?href="javascript:next(1,6)">next</a> <a?href="javascript:prev(1,6)">previous</a> ????</div> ????</body> </html>把原來(lái)的transform樣式改為火狐的，js的樣式要cur.style.MozTransform="rotateX(-90deg)";只修改了一下next(),另外一個(gè)自己改O(∩_∩)O哈！