transform:rotate（）的旋轉是指圖片本身（原地轉向）的旋轉，不是圖片整體方位的旋轉，旋轉以后圖片的正方向Z軸會跟著圖片的正方向變化。
兩個例子（主要區別在注釋里）

3D導航欄

！！先移動后旋轉和先旋轉后移動都可以，注意先旋轉后方位會出現變化。

結果：鼠標移動在導航欄上出現3D旋轉。

3D旋轉木馬

采用先旋轉后移動。如果先移動后旋轉，就要先計算好如果采用旋轉的新方位，再倒推需要移動的位置，以此位置設置移動距離，再旋轉。也就是先想到結果，再倒推位移，記住，此時結果的方位坐標是變化了的。

結果：

總結

以上是生活随笔為你收集整理的CSS练习3D的先旋转后移动和先移动后旋转的区别的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。