前端 - 請(qǐng)教一下CSS3中translateZ和rotateY書寫順序的問題
問題描述
<!DOCTYPE html><html><head><meta charset='utf-8'><title>translateZ測試</title><style>*{margin: 0; padding: 0;}/*父級(jí)p和子級(jí)p的樣式*/.fa{width: 200px; height: 200px; border: 2px solid #000; margin: 100px auto; perspective: 800px;}.son{width: 100%; height: 100%; background: lime; font-size: 20px; text-align: center; -webkit-transform: translateZ(300px) rotateY(55deg);}</style></head><body> <p class='fa'><p class='son'>rotateY</p> </p> </body></html>
當(dāng)先執(zhí)行rotateY，后執(zhí)行translateZ時(shí)，（-webkit-transform: translateZ(300px) rotateY(55deg);）截圖：
當(dāng)先執(zhí)行translateZ，后執(zhí)行rotateY時(shí)，（-webkit-transform: rotateY(55deg) translateZ(300px);）截圖：
請(qǐng)問為什么translateZ和rotateY書寫順序不同，結(jié)果也不同，這其中的原理是什么呢？我看了《圖解CSS3》，也百度了相關(guān)內(nèi)容，但還是不知道為什么。請(qǐng)知道的朋友給講講，謝謝！
問題解答
回答1：這部分我前幾天剛看，也是研究老半天，應(yīng)該是z軸始終是與平面圖形垂直的，先轉(zhuǎn)換角度的話，z軸的方向也相應(yīng)發(fā)生變化。
回答2：腦子里構(gòu)建個(gè)XYZ軸或者畫一個(gè)，然后拿手比劃比劃我覺得是最好最方便的理解方式
回答3：很簡單:
向右轉(zhuǎn)，向前走5步
和
向前走5步，向右轉(zhuǎn)
到達(dá)的位置是不一樣的
回答4：我理解的是:在沒有做任何變換時(shí) 元素都是在translate3d三維的世界 x y z軸的原點(diǎn),不管做任何變換 坐標(biāo)系都不會(huì)變的,第一種情況是 先轉(zhuǎn)55度 在沿著z平移到300px(類似于扭著身子向前走了300px); 而第二種情況是 先平移出來 然后在繞著坐標(biāo)的Y軸旋轉(zhuǎn)(類似于做半徑是300的圓周運(yùn)動(dòng))
相關(guān)文章：
1. 我在centos容器里安裝docker，也就是在容器里安裝容器，報(bào)錯(cuò)了？2. 在windows下安裝docker Toolbox 啟動(dòng)Docker Quickstart Terminal 失敗！3. docker-compose中volumes的問題4. docker不顯示端口映射呢？5. golang - 用IDE看docker源碼時(shí)的小問題6. docker內(nèi)創(chuàng)建jenkins訪問另一個(gè)容器下的服務(wù)器問題7. 關(guān)docker hub上有些鏡像的tag被標(biāo)記““This image has vulnerabilities””8. javascript - 最近用echarts做統(tǒng)計(jì)圖時(shí)遇到兩個(gè)問題！！9. javascript - 連續(xù)點(diǎn)擊觸發(fā)mouseleave事件10. mac里的docker如何命令行開啟呢？
網(wǎng)公網(wǎng)安備