请问一下为什么我代码跟老师的一模一样，但是却没有效果呢
xiaodanxu
2016-03-22 19:07
<!DOCTYPE html>
<html>
<head>
<title>3D效果</title>
<style>
#my3Dspace{
-webkit-perspective: 800;
-webkit-perspective-origin: 50% 50%;
ovetflow:hidden;
}
#pagegrounp{
width:400px;
height:400px;
margin: 0 auto;
-webkit-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;
}
#page2,#page3,#page4,#page5,#page6{
-webkit-transform-origin: bottom;
-webkit-transition: -webkit-transform 1s linear;
-webkit-transform: rotateX(90deg);
}
#op{
text-align:center;
margin:40px auto;
}
</style>
<script type="text/javascript">
var curIndex=1;
function next()
{
if(curIndex==6)return;
var curpage=document.getElementById("page"+curIndex);
curpage.style.webkitTransform="rotateX(-90deg)";
curIndex++;
var nextpage=document.getElementById("page"+curIndex);
nextpage.style.webkitTransform="rotate(0deg)";
}
function prec(){
if(curIndex==1)return;
var curpage=document.getElementById("page"+curIndex);
curpage.style.webkitTransform="rotateX(90deg)";
curIndex--;
var precpage=document.getElementById("page"+curIndex);
precpage.style.webkitTransform="rotateX(0deg)";
}
</script>
</head>
<body>
<div id="my3Dspace">
<div id="pagegrounp">
<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()">next</a> <a href="javascript:prec()">previous</a>
</div>
</body>
</html>
4回答
-
- liyao0907
- 2016-05-16 21:13:24
你可以检查一下你的代码，css中#my3Dspace中overflow拼错了，JS中一个你写成了rotate，
-
- 小千63
- 2016-04-11 10:28:00
浏览器兼容的webkit改一下，-moz,-ms,-o，看你的浏览器是什么
-
- ry836478606
- 2016-03-23 15:56:45
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>翻页效果</title>
<style type="text/css">
.wrap{width:400px;height: 400px;margin: 100px auto;
color: yellow;}
#pagegroup
{
position: relative;
width: 360px;
height: 360px;
margin: 20px auto;
-webkit-perspective:800;
-webkit-perspective-origin:center center;
-webkit-transform-style:preserve-3d;
-webkit-transform-origin:left;
-webkit-transition:transform 1s linear;
}
.page{position: absolute;width: 360px;height: 360px;font:bold 360px/360px SimHei;text-align: center;vertical-align: middle;background-color:rgba(0,0,0,0.3);/* opacity: 0.3 */;
-webkit-transform-origin:left;
-webkit-transition:transform 1s linear;}
#page1{transform: rotateY(0deg);}
#page6,#page2,#page3,#page4,#page5{transform: rotateY(90deg);}
.lr-bt{margin: 50px auto;text-align: center;}
</style>
<script style="text/javascipt">
var curpage = 1;
function pre(){
if(curpage == 1)
return;
var nowpage = document.getElementById("page"+curpage);
nowpage.style.transform = "rotateY(90deg)";
curpage--;
var prepage = document.getElementById("page"+curpage);
prepage.style.transform = "rotateY(0deg)";
console.log("当前是第"+curpage+"页");
}
function next(){
if(curpage == 6)
return;
var nowpage =document.getElementById("page"+curpage);
nowpage.style.transform = "rotateY(-90deg)";
curpage++;
var nextpage = document.getElementById("page"+curpage);
nextpage.style.transform = "rotateY(0deg)";
console.log("当前是第"+curpage+"页");
}
</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>
<a href="javascript:pre();">前一页</a>   
<a href="javascript:next();">下一页</a>
</div>
</div>
</body>
</html>
-
- ry836478606
- 2016-03-23 14:30:15
position:relative;位置定位最好写在css的第一个，那些都是有读取顺序的
CSS3 3D 特效
78574 学习 · 425 问题
相似问题