我写了一个翻页的，可是页面上的数字不跟着翻？怎么解
烟雨湿金戈
2016-10-05 12:36
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>书本翻页效果</title>
<style type="text/css">
*{
margin: 0;
padding: 0;
text-decoration: none;
}
.box1{
-webkit-perspective: 800;
-webkit-perspective-origin: 50% 50%;
}
.box2{
-webkit-transform-style: -webkit-preserve-3d;
width: 200px;
height: 200px;
position: relative;
left: 50%;
margin-left: -100px;
margin-top: 200px;
}
.page{
width: 180px;
height: 180px;
padding: 10px;
background-color: pink;
-webkit-transition: -webkit-transform 2s linear;
-webkit-transform-origin: left;
color: lime;
text-align: center;
line-height: 180px;
font-weight: bolder;
font-size: 100px;
margin: 0 auto;
position: absolute;
}
.box3{
width: 140px;
margin: 0 auto;
}
</style>
</head>
<body>
<div>
<div>
<div id="page1">6</div>
<div id="page2">5</div>
<div id="page3">4</div>
<div id="page4">3</div>
<div id="page5">2</div>
<div id="page6">1</div>
</div>
</div>
<div>
<a href="javascript:prev()">上一页</a>
<a href="javascript:next()">下一页</a>
</div>
<script type="text/javascript">
var index=1;
function prev(){
if(index==1)
return;
index--;
document.getElementById("page"+index).style.webkitTransform = "rotateY(180deg)";
}
function next(){
if(index==6)
return;
document.getElementById("page"+index).style.webkitTransform = "rotateY(-180deg)";
index++;
}
</script>
</body>
</html>
1回答
-
- 第一原罪
- 2016-10-09 19:46:36
那个。你的.box和.box2还有.box3都没有引用啊。。所以没效果
CSS3 3D 特效
78577 学习 · 425 问题
相似问题