前言
最近在練習的時候常常需要使用CSS3屬性transform：rotate，到底X軸，Y軸，Z軸如何旋轉的，糾結了半天，終於還是實踐得真知，寫下這篇文章希望可以幫助大家，如果有說錯的地方歡迎指正，歡迎補充，歡迎交流
關於rotate的基本使用本文不多贅述，不認識這個屬性的朋友可以先看W3C對該屬性的介紹本文主要談談對該屬性旋轉的理解
首先我們從人體的角度感性層面來理解這三個軸
1. 感性層面理解
1.1 X軸
X軸的旋轉好比人在平地不停地後空翻
2.2 Y軸
Y軸的旋轉好比人在平地不停地轉身（不說轉圈是因為怕引起歧義）
2.3 Z軸
是不是很像飛行員的訓練專案？
2. 理想層面理解
有了上面的認識之後接下來就好理解了，我們先來看由這三條軸構成的三維座標圖
我們再來把剛才的旋轉代入到這個座標中，是不是很好理解了。仔細的讀者會注意到我增加的角度一直是正數，其實旋轉的正角度和負角度是有規則的，看到一些文章指出，當rotate的值為正時，各軸按順時針旋轉，反之按逆時針旋轉，根據我的實驗，其實是錯誤的，由於官方沒有對此相應的描述，這裡我們可以使用左手螺旋法則（還記得物理學過的右手螺旋法則嗎，哈哈）
伸出左手，大拇指指向正軸方向，四個手指的指向即是旋轉正向，但務必記住是左手！
這裡要強調兩點：左手，正軸
一定要是使用左手的大拇指指向正軸的方向，我們才可以得到旋轉的正向（旋轉角度為正的方向）
3. C4D三維空間檢視
這裡用C4D建模工具為讀者展示三維XYZ軸的旋轉
我們分別在各軸旋轉正的60度，效果如圖所示（X軸是紅軸，Y軸是綠軸，Z軸是藍軸）
transform: rotateX(60deg) rotateY(60deg) rotateZ(60deg);