關(guān)于9-10 3d旋轉(zhuǎn)導(dǎo)航

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

慕絲9335528

2017-08-06

源自：十天精通CSS3 9-10

關(guān)注問題我要回答

1321

操作

收起

1 回答

言吖頭回答被采納 +2 積分
2017-08-12

transform: translatez(-25px);向z軸的負(fù)方向移動(dòng)25px；transform: translateZ(-25px) rotateX(90deg);移動(dòng)的同時(shí)翻轉(zhuǎn)60度

0 回復(fù) 有任何疑惑可以回復(fù)我~

收起回答

#1

慕絲9335528 提問者

這個(gè)我知道，但我當(dāng)時(shí)放到源碼里的時(shí)候，和整個(gè)過程對(duì)應(yīng)不起來，總感覺其中有一個(gè)移動(dòng)是多余的。。。

2017-08-17 回復(fù) 有任何疑惑可以回復(fù)我~

#2

愛上慕婉清6262634 回復(fù) 慕絲9335528 提問者

先說下核心吧，這兩個(gè)是為了讓元素回到原來位置的。 1.任務(wù)六里面那個(gè)是未觸發(fā)hover和focus時(shí)原始狀態(tài)，在任務(wù)七里進(jìn)行布局的時(shí)候，將兩個(gè)span在z軸上向正方向移動(dòng)25像素，為了保證布局合理，在任務(wù)六里讓他們回到原來位置。所以給任務(wù)六一個(gè)在z軸負(fù)方向的25像素。這樣無動(dòng)態(tài)時(shí)的布局就完成了。（任務(wù)六模塊是任務(wù)七的父級(jí)，所以可以這么搞） 2.任務(wù)五里面觸發(fā)hover時(shí)，元素有一個(gè)rotateX(90deg)，觸發(fā)這個(gè)后元素實(shí)際位置已經(jīng)在z軸上向正方向移動(dòng)25像素；所以在任務(wù)五里面又給個(gè)-25px讓它回到原位。

2017-10-11 回復(fù) 有任何疑惑可以回復(fù)我~