2016
Apr
16

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

    博客写的很好 图文并茂好生动赞

回應 (Leave a comment)