问答详情
源自:3-1 创建3D动画效果结构部分

为什么我的第一张出来的效果是6呢

<style>

     #my3d{-webkit-perspective:800px;    

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

overflow:hidden;

}

#pagegroup{

width:400px;

height:400px;

margin:auto;-webkit-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{

-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}  

 

</style>

</head>


<body>

<div id="my3d">

<div id="pagegroup">

<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="#">上一页</a>&nbsp&nbsp <a href="#">下一页</a>

</body>


提问者:qq_天使的微笑_0 2015-12-17 10:13

个回答

  • 李晓健
    2015-12-17 10:49:01

    #page2, #page3, #page4, #page5, #page6

    你这行后面多一个,

    你的页面结构好像也不完整,后面少了一个 </div>   你问题的原因是上面一个,不是这个

  • JIan單
    2015-12-17 10:47:10

    .page的position属性用错了吧,你换成relative试一试。还有你的div标签没有关闭