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

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

關于9-10 3d旋轉導航

請問任務六里的transform: translatez(-25px);和任務五里的transform: translateZ(-25px) rotateX(90deg);具體是怎么操作的。

正在回答

1 回答

transform: translatez(-25px);向z軸的負方向移動25px；transform: translateZ(-25px) rotateX(90deg);移動的同時翻轉60度

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

慕絲9335528 提問者

這個我知道，但我當時放到源碼里的時候，和整個過程對應不起來，總感覺其中有一個移動是多余的。。。
2017-08-17 回復 有任何疑惑可以回復我~
#2

愛上慕婉清6262634 回復 慕絲9335528 提問者

先說下核心吧，這兩個是為了讓元素回到原來位置的。 1.任務六里面那個是未觸發hover和focus時原始狀態，在任務七里進行布局的時候，將兩個span在z軸上向正方向移動25像素，為了保證布局合理，在任務六里讓他們回到原來位置。所以給任務六一個在z軸負方向的25像素。這樣無動態時的布局就完成了。（任務六模塊是任務七的父級，所以可以這么搞） 2.任務五里面觸發hover時，元素有一個rotateX(90deg)，觸發這個后元素實際位置已經在z軸上向正方向移動25像素；所以在任務五里面又給個-25px讓它回到原位。
2017-10-11 回復 有任何疑惑可以回復我~

舉報

0/150
提交
取消

關于9-10 3d旋轉導航

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

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

 幫助反饋 APP下載

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

 公眾號

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