为了账号安全,请及时绑定邮箱和手机立即绑定
关注
weixin_卓卓_1

求指教,为啥我做的没效果呀


<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title>Document</title>

<style type="text/css">

#testBox{

-webkit-perspective:500;

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


}

#wrrap{

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

width:300px;

height:300px;

position: relative;

margin: 50px auto;

}

.num{

width: 300px;

height: 300px;

background-color: black;

color: white;

font-size: 200px;

position: absolute;

line-height: 300px;

text-align:center;

-webkit-transform-origin:bottom;

-webkit-transition: -webkit-transform 1s linear;

}

#num1{

-webkit-transform:rotateX(0deg);

}

#num2,#num3,#num4{

-webkit-transform:rotateX(90deg);

}

.op{

    text-align:center;

    margin:0 auto;

 }

</style>

<script type="text/javascript">

var page=1;

function next(){

         var dqy=document.getElementbyId("num"+page);

             dqy.style.webkitTransform="rotateX(-90deg)";

         page ++;

         var xyy=document.getElementbyId("num"+page);

             xyy.style.webkitTransform="rotateX(0deg)";    }

function previous(){

         var dqy=document.getElementbyId("num"+page);

             dqy.style.webkitTransform="rotateX(90deg)";

         page --;

         var qyy=document.getElementbyId("num"+page);

             qyy.style.webkitTransform="rotateX(0deg)";     }

</script>

</head>

<body>

<div id="testBox">

  <div id="wrrap">

   <div id="num1">1</div>

   <div id="num2">2</div>

   <div id="num3">3</div>

   <div id="num4">4</div>

  </div>

</div>

<div>

<a href="javascript:next()">next</a>&nbsp;<a href="javascript:previous()">previous</a>

</div>

</body>

</html>


2016-11-25 源自:CSS3 3D 特效 3-2 412 浏览 2 回答

<!DOCTYPE html>
<html>
<head lang="en">
   <meta charset="UTF-8">
   <title></title>
   <style>
       #my3Dspace{
           perspective: 800px;
           perspective-origin: 50% 50%;
           overflow: hidden;
       }
       #pagegroup{
           width:400px;
           height:400px;
           margin:0 auto;
           -webkit-transform-style: preserve-3d;
           -moz-transform-style: preserve-3d;
           -ms-transform-style: preserve-3d;
           transform-style: preserve-3d;
           position: relative;
       }
       .page{
           width:360px;
           height:360px;
           padding: 20px;
           background-color: #000;
           color:#fff;
           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);
       }
       .btn{
           text-align: center;
           margin-top: 20px;
       }
   </style>
</head>
<body>
   <div id="my3Dspace">
       <div id="pagegroup">
           <div id="page1" class="page">1</div>
           <div id="page2" class="page">2</div>
           <div id="page3" class="page">3</div>
           <div id="page4" class="page">4</div>
           <div id="page5" class="page">5</div>
           <div id="page6" class="page">6</div>
       </div>
   </div>
   <div class="btn">
       <a href="javascript:prev()" id="prev">上一张</a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
<a href="javascript:next()" id="next">下一张</a>
   </div>
   <script>
       var curIndex=1;
       function next(){
           if(curIndex==6){
               return;
           }
           var curpage=document.getElementById("page"+curIndex);
           curpage.style.transform="rotatex(-90deg)";
           curIndex++;
           curpage=document.getElementById("page"+curIndex);
           curpage.style.transform="rotatex(0deg)";
       }
       function prev(){
           if(curIndex==1){
               return ;
           }
           var curpage=document.getElementById("page"+curIndex);
           curpage.style.transform="rotatex(90deg)";
           curIndex--;
           curpage=document.getElementById("page"+curIndex);
           curpage.style.transform="rotatex(0deg)";
       }
   </script>
</body>
</html>

2016-12-03
回复 0

首先你的页面显示就有问题,style中num的样式是写给谁的呢,显然你是要给每一个页面的,那么就要写给每个页面的class

2017-03-11
回复 0

举报

0/150
提交
取消
意见反馈 帮助中心 APP下载
官方微信