亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

為了賬號安全,請及時綁定郵箱和手機立即綁定

transition創建3d效果結構部分

-------css代碼------

.dspace{

-webkit-perspective: 800;

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

overflow: hidden;

}

.pagegroup{

width:400px;

height:400px;

margin:0 auto;

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

position: relative;

}

.page{

width: 360px;

height: 360px;

padding: 20px;

background-color: black;

color: white;

font-weight: bold;

font-size: 360px;

line-height: 360px;

text-align: center;

position: absolute;

}

#page1{

-webkit-transform-origin: bottom;

-webkit-transition: 1s linear;

}

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

-webkit-transform-origin: bottom;

-webkit-transition: 1s linear;

-webkit-transform: rotate(90deg);

}

.op{

margin: 40 auto;

text-align: center;

}

-----html代碼-----

<div class="dspace">

<div class="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 class="op">

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

</div>


-------問題如下-----

這個6怎么多出來了

http://img1.sycdn.imooc.com//5a7272360001681707840530.jpg


------預計效果------

預計本來只看得到一個1,其他的都看不見的

http://img1.sycdn.imooc.com//5a72727e0001c1cf03450170.jpg

正在回答

1 回答

-webkit-transform: rotate(90deg);

-webkit-transform:rotateX(90deg);

1 回復 有任何疑惑可以回復我~

舉報

0/150
提交
取消
CSS3 3D 特效
  • 參與學習       78568    人
  • 解答問題       436    個

使用CSS3當中的屬性,創建真實可用的三維效果

進入課程

transition創建3d效果結構部分

我要回答 關注問題
微信客服

購課補貼
聯系客服咨詢優惠詳情

幫助反饋 APP下載

慕課網APP
您的移動學習伙伴

公眾號

掃描二維碼
關注慕課網微信公眾號