谁能告诉我为啥执行不了，浏览器也不报错
<!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>
江城fen3回答
-
卖火柴的小舒
很多问题。首先那个next和previous应该用按钮而是不是a标签。还有js里面的.webkitTransForm要改成.webkitTransform.还有css布局也有问题，这个可以对比一下课程。 -
江城fen
#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>这次照着老师抄了一下，一直都看不出什么问题，为什么会看见后面的数字
随时随地看视频慕课网APP
CSS3
Html/CSS
JavaScript