rotate
rotateX
rotateY
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的，看下面的圖，轉個身就知道在那里了。
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 對吧，拿這個值來圖解比較好。
