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);

六个面合体

最后只要将六个组合起来，就会形成一个立体正方形：