为了账号安全,请及时绑定邮箱和手机立即绑定

求指教哪里错了,我用的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>&nbsp;<a href="javascript:prev()">prev</a>
  </div>

 </body>
</html>

哪里错了嘛!!求指教 

正在回答

1 回答

 perspective:800;

  perspective-origin:50% 100%;

  transform-style:preserve-3d;

nextpage.style.transform="rotateX(0deg)";

因为兼容性的问题,这些地方要把谷歌内核加上去,要不然没有效果。

-webkit-perspective:800;

-webkit-perspective-origin:50% 100%;

  -webkit-transform-style:preserve-3d;

nextpage.style.webkittransform="rotateX(0deg)";


0 回复 有任何疑惑可以回复我~
#1

misses 提问者

非常感谢!
2015-08-13 回复 有任何疑惑可以回复我~

举报

0/150
提交
取消

求指教哪里错了,我用的notepad++和谷歌浏览器。。。

我要回答 关注问题
意见反馈 帮助中心 APP下载
官方微信