<!DOCTYPE html><html><head> <meta charset="utf-8" /> <title></title> <style type="text/css"></style> <style type="text/css"> #my3D{ -webkit-perspective:800; -webkit-perspective-origin:50% 50%; } #mycard{ width: 400px; height: 400px; margin: 0 auto; -webkit-transform-style:perspective-3d; overflow: hidden; } .page{ width: 360px; height: 360px; padding: 20px; background-color: rgb(0,0,0); color: rgb(255,255,255); font-size: 360px; font-weight: bold; text-align: center; } #num1{ -webkit-transform-origin: bottom; -webkit-transition: -webkit-transform 1s linear; } #num2,#num3,#num4,#num5,#num6{ -webkit-transform-origin:bottom; -webkit-transition: -webkit-transform 1s linear; -webkit-transform:rotateX(90deg); } .control{ margin: 40px auto; text-align: center; } </style></head><body> <div id="my3D"> <div id="mycard"> <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 class="control"> <input type="button" onclick="next()" value="next" /> <a href="" id="next1" onclick="next()">next</a> <a href="" id="previous" onclick="previous()">previous</a> </div> <script type="text/javascript"> var i = 1; function next(){ if (i==6) { return; } var showcard = document.getElementById("page"+i); showcard.style.webkitTransForm = "rotateX(-90deg)"; i++; var nextcard = document.getElementById("page"+i); nextcard.style.webkitTransForm = "rotateX(0deg)"; } function previous(){ if(i==1){ return; } var showcard = document.getElementById("page"+i); showcard.style.webkitTransForm = "rotateX(90deg)"; i--; var lastcard = document.getElementById("page"+i); nextcard.style.webkitTransForm = "rotateX(0deg)"; } var btn = document.getElementById("next1"); btn.onclick = next(); </script></body></html>
3 回答
卖火柴的小舒
TA贡献42条经验 获得超16个赞
很多问题。首先那个next和previous应该用按钮而是不是a标签。还有js里面的.webkitTransForm要改成.webkitTransform.还有css布局也有问题，这个可以对比一下课程。
江城fen
TA贡献7条经验 获得超2个赞
#my3d{
-webkit-perspective: 800;
-webkit-perspective-origin:50% 50%;
overflow: hidden;
}
#pagegroup{
width: 500px;
height: 500px;
margin: 0 auto;
-webkit-transform-style: perspective-3d;
position: relative;
}
.page{
width: 360px;
height: 360px;
font-weight: bold;
padding: 20px;
background-color: black;
color: white;
font-size: 360px;
line-height: 360px;
text-align: center;
position: absolute;
}
#page1{
-webkit-transform-origin: bottom;
-webkit-transition: -webkit-transform 1s linear;
}
#page2,#page3,#page4,#page5,#page6{
-webkit-transform-origin: bottom;
-webkit-transition: -webkit-transform 1s linear;
-webkit-transform: rotateX(90deg);
}
#op{
text-align: center;
margin: 40 auto;
}
</style>
这次照着老师抄了一下，一直都看不出什么问题，为什么会看见后面的数字
添加回答
举报
0/150
提交
取消