rotate
rotateX
rotateY
rotateZ
rotate3d
rotate：
旋轉該元素，配合著transform-origin屬性，transform-origin 是設置旋轉點的。(沒有設置transform-origin 屬性也可以，只不過是根據該元素的中心點旋轉，也就是center center)
加上 transform-origin 設置旋轉點。transform-origin 是根據自己而定位的，所以 0px 0px 就是左上角那個點。
rotateX：
講這個之前呢， 先普及壹個知識， 在transform裏面，x y z 軸，分別是什麽樣子的，他跟我們平常的 x 和 y 不太壹樣，因為， 他是倒著的。 Z軸呢，在0 那個位置，因為他是3D的，看下面的圖，轉個身就知道在那裏了。
接下來，看看 所謂的 Z 軸是什麽
rotateX 的X呢，可以寫成大寫的，也可以寫成小寫的x， 沒有影響，這個屬性呢，妳加上rotateX 之後，這個元素，就會以 X 軸 旋轉，裏面填的是角度。
這樣看起來，好像不是那麽直觀，畢竟是2D 的圖， 來給他加了3D 的效果看看，(由於設置了 transform-origin：0 0，所以並不會在元素的中間旋轉，而是以 0 0 點的那條x 軸旋轉)
上面兩個圖，第壹個圖是在 2d的 情況下觀看的，第二個圖是 3d的時候， 是不是 3d 看起來比較直觀。
那麽，接下來，加上Y 壹起使用，rotateX(45deg) rotateY(45deg)，這兩個合在壹起什麽意思呢， 這個元素，先按照 X軸，旋轉45度，然後再按照Y軸，旋轉45度，那麽接下來的結果會是怎麽樣呢？
由於我設置的 transform-origin：center center ；定的點在中心，那麽兩條軸，是會成這樣子的。
然後，看下，結果，是不是如我們所示？
最後，加上rotateZ
rotate3D：
設置壹條主軸，然後根據這條軸旋轉
這個呢，可以設置4個參數， 前三個是，x y z 最後壹個是 角度deg 但是，此 x y z ，可不是上面那幾個，不壹樣的。這三個值，設置的是矢量的方向，填什麽無所謂，主要是比值很重要。舉個例子 1，1，0，0deg 那麽就是 1：1：0 = 100：100：0 對吧，拿這個值來圖解比較好。