CSS 座標系統如下，上下是 y 軸的，往上小於 0 (-y) ，得下大於 0 (+y) ，左右是 x 軸，右邊是正數 (+x)，左邊是負數 (-x)， 最後是 z 軸，往螢幕的方向是負數 (-z)，往 user 的方向是正數 (+z)。
CSS Translate 3D
再來我們要先認識 translate 的行為，這樣才能知道整個座標系統 ，translate3d (x ,y ,z) 有三個參數，分別是 x, y, z 三軸的移動距離，當 x = 10px ，代表物件會在 x 軸上往右移動 10px 。
transform: translate3d(x, y, z)
看下面的 Demo ，我使用 css 中的 transform: translate3d(x, y, z) 來測試三個軸的移動方向， x , y 軸的移動很簡單，就只是上下，左右的移動，重點在於 z 軸的方向，範例中我刻意把中心點標出來，中間有一個白點，主要是為了更清楚的看出物件在 z 軸上的移動，當物件往 -z 的方向移動，物件的距離變遠了，所以物件的尺寸會變小，而當物件往 +z 的方向移動，物件的尺寸就會變大。
CSS rotate 3D
rotate3d 是用來做 3D 旋轉的 CSS 屬性，它有四個參數要設定，(x, y, z) 三個值與 原點 (0, 0, 0) 形成的一條線，稱為旋轉軸，物件會對著該軸來做旋轉，而 第四個參數 degree 則是旋轉角度。
transform: rotate3d(x, y, z, degree)
在實作 3D 旋轉前，我們還要先了解，物件是對著什麼東西旋轉，一般在 2D 的畫面中，物件是要對著某一個點旋轉，而在 3D 畫面則是要對著某一條線來旋轉，也就是剛提到的旋轉軸，下面這個範例，分別實做了對著 x 軸、 y 軸、 z 軸來做旋轉。
上個範例可以看出，物件只是在原地旋轉，因為物件的中心點 (0, 0, 0)，剛好就在旋轉軸上，不管對著 x, y ,z 哪個軸旋轉，中心點 (0, 0, 0) 都被這三個軸穿過，所以物件旋轉的時候，中心點是不會變動的。
所以我們要改變物件的中心點，讓他呈現出 3D 旋轉的效果，我使用 translate3d(0, 0, -150px)，把物件往 -z 軸移動 150 px，再讓這個物件對著 y 軸旋轉，看下面這個範例，如果我們把原點 (0, 0, 0) 當成 太陽，那麼目前旋轉的物件就像地球一樣，對著太陽旋轉 。
不管是 rotate3d 或是 translate3d ，都要寫在 transform 這個 CSS 屬性裡，必須使用空白來分隔這兩個效果。
transform: rotate3d(0, 1, 0 , 30deg) translate3d(0, 0, -150px);
下一篇文章將實作一個立體正方形。
目前回應 Comments(2 comments)
OWOEOMO 2020/04/14
讚，全都是想要的效果跟解釋
ahong 2019/11/07
博客写的很好 图文并茂好生动赞