                        課程
                    
                        /前端開發(fā)
                        
                            /CSS3
                        
                        /CSS3 3D 特效

求老師解答改成翻書效果后出現(xiàn)問題數(shù)字都亂了?。?/h1>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>無標(biāo)題文檔</title>
<style>
#win{
?? ?-moz-perspective:800px;
?? ?-ms-perspective:800px;
?? ?-webkit-perspective:800px;
?? ?-moz-perspective-origin:50% 65%;
?? ?-ms-perspective-origin:50% 65%;
?? ?-webkit-perspective-origin:50% 65%;
?? ?overflow:hidden;}
#pagecontent{
?? ?width:400px;
?? ?height:400px;
?? ?margin:0 auto;
?? ?-moz-transform-style:preserve-3d;
?? ?-ms-transform-style:preserve-3d;
?? ?-webkit-transform-style:preserve-3d;
?? ?position:relative;
?? ?}
.page{
?? ?width:360px;
?? ?height:360px;
?? ?padding:20px;
?? ?font-weight:bold;
?? ?font-size:300px;
?? ?color:#F00;
?? ?background-color:#000;
?? ?text-align:center;
?? ?position:absolute;}
#page1{
?? ?-moz-transform-origin:left;
?? ?-ms-transform-origin:left;
?? ?-webkit-transform-origin:left;
?? ?-moz-transition:transform 1s linear;
?? ?-ms-transition:transform 1s linear;
?? ?-webkit-transition:transform 1s linear;}
#page2,#page3,#page4,#page5,#page6{
?? ?-moz-transform-origin:left;
?? ?-ms-transform-origin:left;
?? ?-webkit-transform-origin:left;
?? ?/-moz-transform:rotateY(90deg);
?? ?-ms-transform:rotateY(90deg);
?? ?-webkit-transform:rotateY(90deg);/
?? ?-moz-transition:transform 1s linear;
?? ?-ms-transition:transform 1s linear;
?? ?-webkit-transition:transform 1s linear;}
#ope{
?? ?text-align:center;
?? ?margin-top:100px;}
</style>
<script>
var curNum=1;
function next(){
?? ?if(curNum==6)
?? ?{return;
?? ?alert("已經(jīng)是最后一頁(yè)了！");}
?? ?var curPage=document.getElementById("page"+curNum);
?? ?curPage.style.moztransform="rotateY(-180deg)";
?? ?curPage.style.transform="rotateY(-180deg)";
?? ?curNum++;
?? ?var nextPage=document.getElementById("page"+curNum);
?? ?nextPage.style.transform="rotateY(-180deg)";
?? ?}
function previous(){
?? ?if(curNum==1)
?? ?{return;
?? ?alert("已經(jīng)是最前一頁(yè)了！");}
?? ?/var curPage=document.getElementById("page"+curNum);/
?? ?/curPage.style.transform="rotateY(90deg)";/
?? ?curNum--;
?? ?var prePage=document.getElementById("page"+curNum);
?? ?prePage.style.transform="rotateY(0deg)";
?? ?}
</script>
</head>

<body>
<div id="win">
?? <div id="pagecontent">
????? <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 id="ope">
????? <input type="button" value="下一個(gè)" onclick="next()" />
????? <input type="button" value="上一個(gè)" onclick="previous()" />
?? </div>
</div>
</body>
</html>

各種各種各種

2015-10-12

源自：CSS3 3D 特效 3-2

關(guān)注問題我要回答

841

操作

收起

2 回答

_Doogie
2016-03-05

<!DOCTYPE?html?PUBLIC?"-//W3C//DTD?XHTML?1.0?Transitional//EN"?"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html?xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta?http-equiv="Content-Type"?content="text/html;?charset=utf-8"?/>
<title>無標(biāo)題文檔</title>
<style>
#win{
????-moz-perspective:800px;
????-ms-perspective:800px;
????-webkit-perspective:800px;
????perspective:800px;
????-moz-perspective-origin:50%?50%;
????-ms-perspective-origin:50%?50%;
????-webkit-perspective-origin:50%?50%;
????height:400px;
????overflow:hidden;
}
#pagecontent{
????width:400px;
????height:400px;
????margin:0?auto;
????-moz-transform-style:preserve-3d;
????-ms-transform-style:preserve-3d;
????-webkit-transform-style:preserve-3d;
????position:relative;
}
.page{
????width:360px;
????height:360px;
????padding:20px;
????font-weight:bold;
????font-size:300px;
????color:#F00;
????background-color:#000;
????text-align:center;
????position:absolute;
}
#page1{
????-moz-transform-origin:left;
????-ms-transform-origin:left;
????-webkit-transform-origin:left;
????-moz-transition:-moz-transform?1s?linear;
????-ms-transition:-ms-transform?1s?linear;
????-webkit-transition:-webkit-transform?1s?linear;
}
#page2,#page3,#page4,#page5,#page6{
????-moz-transform-origin:left;
????-ms-transform-origin:left;
????-webkit-transform-origin:left;
????-moz-transition:-moz-transform?1s?linear;
????-ms-transition:-ms-transform?1s?linear;
????-webkit-transition:-webkit-transform?1s?linear;
}
#page6{
????z-index:1;
}
#page5{
????z-index:2;
}
#page4{
????z-index:3;
}
#page3{
????z-index:4;
}
#page2{
????z-index:5;
}
#page1{
????z-index:6;
}
#ope{
????text-align:center;
????margin-top:100px;
}
</style>
<script>
var?curNum=1;
var?curIndex?=?1;
function?next(){
????if(curNum==6)
????{
????????return;
????}
????var?curPage=document.getElementById("page"+curNum);
????curPage.style.mozTransform="rotateY(-180deg)";
????curPage.style.webkitTransform="rotateY(-180deg)";
????curPage.style.zIndex?=?curIndex++;
????curNum++;
????}
function?previous(){
????if(curNum==1)
????{
????????return;
????}
????curNum--;
????var?prePage=document.getElementById("page"+curNum);
????prePage.style.webkitTransform="rotateY(0deg)";
????prePage.style.mozTransform="rotateY(0deg)";
????prePage.style.zIndex?=?curIndex++;
????}
</script>
</head>
<body>
<div?id="win">
???<div?id="pagecontent">
??????<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="ope">
??????<input?type="button"?value="下一個(gè)"?onclick="next()"?/>
??????<input?type="button"?value="上一個(gè)"?onclick="previous()"?/>
???</div>
</body>
</html>