CSS3实现立方体

CSS3可以实现制作立方体，代码简单，只是涉及CSS3的一些变换、动画以及过渡属性，而且这些大家都见过，通过制作这个立方体可以让大家更好见识到CSS3的厉害。

实现效果如下图：

立方体是由六个面组成，分上下、左右和前后，考虑这些可以助我们更好的融入css3的代码
接下来就是要写代码了：
首先我们设一个大盒子cube，包裹住六个div：

然后是css代码：
首先在.cube里设置宽高，整体居中，这些按个人习惯，不可省略的有定位，目的是为了让每个面叠在一起，方便后来旋转及平移操作，之后就是创造3d空间：.box里有perspective:800px;.cube里有transform-style:preserve-3d;

 

文章详情、源代码下载请单击这里

 

许你一城个人博客

转载于:https://www.cnblogs.com/xuniyicheng/p/8733255.html