CSS 實做 3D 立體正方形

這篇文章會教你如何製作一個 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);

六個面合體

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