前端 - 請教一下CSS3中translateZ和rotateY書寫順序的問題
問題描述
<!DOCTYPE html><html><head><meta charset='utf-8'><title>translateZ測試</title><style>*{margin: 0; padding: 0;}/*父級p和子級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時，（-webkit-transform: translateZ(300px) rotateY(55deg);）截圖：
當(dāng)先執(zhí)行translateZ，后執(zhí)行rotateY時，（-webkit-transform: rotateY(55deg) translateZ(300px);）截圖：
請問為什么translateZ和rotateY書寫順序不同，結(jié)果也不同，這其中的原理是什么呢？我看了《圖解CSS3》，也百度了相關(guān)內(nèi)容，但還是不知道為什么。請知道的朋友給講講，謝謝！
問題解答
回答1：這部分我前幾天剛看，也是研究老半天，應(yīng)該是z軸始終是與平面圖形垂直的，先轉(zhuǎn)換角度的話，z軸的方向也相應(yīng)發(fā)生變化。
回答2：腦子里構(gòu)建個XYZ軸或者畫一個，然后拿手比劃比劃我覺得是最好最方便的理解方式
回答3：很簡單:
向右轉(zhuǎn)，向前走5步
和
向前走5步，向右轉(zhuǎn)
到達的位置是不一樣的
回答4：我理解的是:在沒有做任何變換時 元素都是在translate3d三維的世界 x y z軸的原點,不管做任何變換 坐標(biāo)系都不會變的,第一種情況是 先轉(zhuǎn)55度 在沿著z平移到300px(類似于扭著身子向前走了300px); 而第二種情況是 先平移出來 然后在繞著坐標(biāo)的Y軸旋轉(zhuǎn)(類似于做半徑是300的圓周運動)
相關(guān)文章：
1. sql語句 - 如何在mysql中批量添加用戶？2. shell - Update query wrong in MySQL3. javascript - mysql插入數(shù)據(jù)時怎樣避免與庫中的數(shù)據(jù)重復(fù)？4. php - 數(shù)據(jù)庫表如果是null怎么替換為其他字段的值5. 事務(wù) - mysql共享鎖lock in share mode的實際使用場景6. 怎么php怎么通過數(shù)組顯示sql查詢結(jié)果呢，查詢結(jié)果有多條，如圖。7. mysql - JAVA怎么實現(xiàn)一個DAO同時實現(xiàn)查詢兩個實體類的結(jié)果集8. SQLAlchemy 訪問Mysql數(shù)據(jù)庫彈出Warning,VARIABLE_VALUE，如何解決？9. mysql - 數(shù)據(jù)庫建字段，默認(rèn)值空和empty string有什么區(qū)別 11010. mysql建表報錯，查手冊看不懂，求解？
網(wǎng)公網(wǎng)安備