前端 - 請教一下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>
當先執行rotateY，后執行translateZ時，（-webkit-transform: translateZ(300px) rotateY(55deg);）截圖：
當先執行translateZ，后執行rotateY時，（-webkit-transform: rotateY(55deg) translateZ(300px);）截圖：
請問為什么translateZ和rotateY書寫順序不同，結果也不同，這其中的原理是什么呢？我看了《圖解CSS3》，也百度了相關內容，但還是不知道為什么。請知道的朋友給講講，謝謝！
問題解答
回答1：這部分我前幾天剛看，也是研究老半天，應該是z軸始終是與平面圖形垂直的，先轉換角度的話，z軸的方向也相應發生變化。
回答2：腦子里構建個XYZ軸或者畫一個，然后拿手比劃比劃我覺得是最好最方便的理解方式
回答3：很簡單:
向右轉，向前走5步
和
向前走5步，向右轉
到達的位置是不一樣的
回答4：我理解的是:在沒有做任何變換時 元素都是在translate3d三維的世界 x y z軸的原點,不管做任何變換 坐標系都不會變的,第一種情況是 先轉55度 在沿著z平移到300px(類似于扭著身子向前走了300px); 而第二種情況是 先平移出來 然后在繞著坐標的Y軸旋轉(類似于做半徑是300的圓周運動)
相關文章：
1. html5 - 有可以一次性把所有 css外部樣式轉為html標簽內style=" "的方法嗎?2. sql語句 - mysql中關聯表查詢問題3. javascript - [js]為什么畫布里不出現圖片呢？在線等4. javascript - 如何將一個div始終固定在某個位置；無論屏幕和分辨率怎么變化；div位置始終不變5. javascript - vscode alt+shift+f 格式化js代碼，通不過eslint的代碼風格檢查怎么辦。。。6. html - vue項目中用到了elementUI問題7. javascript - 有什么比較好的網頁版shell前端組件？8. javascript - iframe 為什么加載網頁的時候滾動條這樣顯示？9. javascript - 這不是對象字面量函數嗎？為什么要new初始化？10. javascript - 原生canvas中如何獲取到觸摸事件的canvas內坐標?
網公網安備