CSS3之立方體

要想利用css3做出立方體，首先我們應該先想象以下立方體的構造，見下圖：

        立方體是由六個面組成，分上下左右和前後，考慮這些可以助我們更好的融入css3的程式碼

        接下來就是要寫程式碼了：

        首先我們設一個大盒子box，包裹住六個div,可以分別給class名：up,down,left,right,before,after

        然後是css程式碼：

        首先在.box裡設定寬高，整體居中，這些按個人習慣，不可省略的有定位，目的是為了讓每個小盒子疊在一起，方便後來旋轉及平移操作，之後就是創造3d空間

        接下來就是給每個小div設定寬高，透明度，定位

        在接下來設定每個面的位置，按我寫的順序來：

        上面：原始位置都是正對著我們的，這個要理解，要想讓正對我們的面跑到上面去，以X軸向上旋轉90度，此時座標系也跟著X軸發生了變化，所以此時Z軸是向上的，此時向Z軸平移100px（根據設定的寬高而定）就可以了，大家發揮一下想象力哦！如果有不懂得的，可以關注我的部落格，或者評論，我都會為大家解答的。見圖

         做好了一個面，其實其他的面就好理解了，下面我把其他面的都給出圖，大家認真研究一下

.down{
			background:orange;
			transform:rotateX(-90deg) translateZ(100px);
		}
		.left{
			background:yellow;
			transform:rotateY(-90deg) translateZ(100px);
		}
		.right{
			background:blue;
			transform:rotateY(-90deg) translateZ(100px);
		}
		.before{
			background:cyan;
			transform:translateZ(100px);
		}
		.after{
			background:purple;
			transform:translateZ(-100px);
		}
 

         好了，設定完這些就可以實現一個完整的立方體了，實際效果見第一張圖，是依靠這個程式碼實現的。

         希望可以幫到大家，歡迎大家多多關注，歡迎評論找錯，大家共同學習！