利用CSS3做出立方体

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

         好了，设置完这些就可以实现一个完整的立方体了，实际效果见第一张图，是依靠这个代码实现的。

         希望可以帮到大家，欢迎大家多多关注，欢迎评论找错，大家共同学习！