                        課程
                    
                        /前端開(kāi)發(fā)
                        
                            /HTML/CSS
                        
                        /十天精通CSS3

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

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

慕絲9335528

2017-08-06

源自：十天精通CSS3 9-10

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

1349

操作

收起

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 提問(wèn)者

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

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

#2

愛(ài)上慕婉清6262634 回復(fù) 慕絲9335528 提問(wèn)者

先說(shuō)下核心吧，這兩個(gè)是為了讓元素回到原來(lái)位置的。 1.任務(wù)六里面那個(gè)是未觸發(fā)hover和focus時(shí)原始狀態(tài)，在任務(wù)七里進(jìn)行布局的時(shí)候，將兩個(gè)span在z軸上向正方向移動(dòng)25像素，為了保證布局合理，在任務(wù)六里讓他們回到原來(lái)位置。所以給任務(wù)六一個(gè)在z軸負(fù)方向的25像素。這樣無(wú)動(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ù)我~