2016
Apr
19

網頁好讀版

這篇文章會教你如何製作一個 3D 的立體正方形,如下圖:

如果你對 CSS rotate3d 與 translate3d 還不熟,可以先閱讀我的上一篇文章CSS 3D 旋轉 rotate3d 與 translate3d

首先立體正方形有六個面,我分別定義成 Front(1), Back(2), Right(3), Left(4), Top(5), Bottom(6) 等六個。

Top 正方形上方

Top 必須對著 x 軸旋轉 -90 度, 負數的角度,代表逆時針旋轉,當 Top 旋轉 -90 度,那它就會剛好在上方,就像天花板一樣,旋轉過程如下圖。

transform: rotate3d(1 ,0 ,0, -90deg) translateZ(-50px);

Bottom 正方形下方

Bottom 必須對著 x 軸旋轉 +90 度, 正數的角度,代表順時針旋轉,當 Bottom 旋轉 +90 度,那它就會正好落在正方形的下方,旋轉過程如下圖。

transform: rotate3d(1 ,0 ,0, 90deg) translateZ(-50px);

Left 正方形左方

Left 必須對著 y 軸旋轉 +90 度, 正數的角度,代表順時針旋轉,當 Left 旋轉 +90 度,那它就會正好落在正方形的左方,旋轉過程如下圖。

transform: rotate3d(0 ,1 ,0, 90deg) translateZ(-50px);

Right 正方形右方

Right 正方形的右邊,必須對著 y 軸旋轉 -90 度, 負數的角度,代表逆時針旋轉,當 Right 旋轉 -90 度,那它就會正好落在正方形的右方,旋轉過程如下圖。

transform: rotate3d(0 ,1 ,0, -90deg) translateZ(-50px);

Back 正方形後方

Back 正方形的背面,這一面不用旋轉,只要往螢幕的方向 ( z 軸 ) 推進去即可,如下圖。

transform: rotate3d(0 ,0 ,0, 0deg) translateZ(-50px);

Front 正方形前方

Front 正方形的正面,這一面就是背面的另一邊,所以就是背面再對 x 軸旋轉 180 度,或是你也可以改轉它的 z 座標,往 +z 的方向移動,這裡我採用的方式是旋轉 180 度,旋轉過程如下圖。

transform: rotate3d(1 ,0 ,0, 180deg) translateZ(-50px);

六個面合體

最後只要將六個組合起來,就會形成一個立體正方形:

網頁好讀版