求指教哪里错了,我用的notepad++和谷歌浏览器。。。
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<meta name="Generator" content="EditPlus®">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<title>Document</title>
<style>
#my3dspace{
perspective:800;
perspective-origin:50% 100%;
transform-style:preserve-3d;
overflow:auto;
}
#pagegroup{
width:400px;
height:400px;
margin:0 auto;
position:relative;
}
.page{
width:360px;
height:360px;
padding:20px;
background-color:black;
color:white;
font-size:360px;
font-weight:bold;
line-height:360px;
text-align:center;
position:absolute;
}
#page1{
transform-origin:bottom;
transition:transform 1s linear;
}
#page2, #page3, #page4, #page5, #page6{
transform-origin:bottom;
transition:transform 1s linear;
transform:rotateX(90deg);
}
#op{
text-align:center;
margin:40px auto;
}
</style>
<style type="text/javascript">
var curindex=1;
function next(){
if(curindex==6)
{return;}
var curpage=getElementById("page"+curindex);
curpage.style.transform="rotateX(-90deg)";
curindex++;
var nextpage=getElementById("page"+curindex);
nextpage.style.transform="rotateX(0deg)";
}
function prev(){
if(curindex==1)
{ return;}
var curpage=getElementById("page"+curindex);
curpage.style.transform="rotateX(90deg)";
curindex--;
var nextpage=getElementById("page"+curindex);
nextpage.style.transform="rotateX(0deg)";
}
</style>
</head>
<body>
<div id="my3dspace">
<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>
<div id="op">
<a href="javascript:next()">next</a> <a href="javascript:prev()">prev</a>
</div>
</body>
</html>哪里错了嘛!!求指教