为了账号安全,请及时绑定邮箱和手机立即绑定
关注
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 464 浏览 2 回答

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

2017-03-11
0

举报

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