3D立方体

CSS3确实很强大，很多高大上的动画都可以实现，这里来实现下3D立方体，效果图如下：

3D立方体.gif

html

其实，实现3D立方体需要的html十分简单，只需要一个ul标签里面包裹6个li标签，分别用来表示3D立方体的6个面[ 前，下，后，上，左，右 ]。具体代码如下:

    
1
    
2
    
3
    
4
    
5
    
6

CSS3

ul

基本的宽高这些就不说了；作为整个3D立方体的父级元素，需要设置positiion属性为relative，还要最重要的是设置它的动画类型tranform-style为preserve-3d，这样就可以实现它的所有子元素都进行3d动画。

li

宽高设置为100%，position属性设置为absolute。

• 前
  设置背景，并且沿着Z轴移动50px，即宽高的一半(为什么得添加这个, 后面用动画进行解释说明)。
• 下
  设置背景，沿着X轴旋转-90deg，作为底面，同样，并且沿着Z轴移动50px。
• 后
  设置背景，沿着X轴旋转-180deg，作为后面，同样，并且沿着Z轴移动50px。
• 上
  设置背景，沿着X轴旋转90deg，作为上面，同样，并且沿着Z轴移动50px。
• 左
  设置背景，沿着Y轴旋转-90deg，作为左面，同样，并且沿着Z轴移动50px。
• 右
  设置背景，沿着Y轴旋转90deg，作为右面，同样，并且沿着Z轴移动50px。
  
  效果.gif

结尾说明

这里说明上面那个translate，先来看看如果不添加这个属性是怎样的效果：

动画.gif

可见，所有的面都交集于立方体的中心点。由于未对6个面作任何动画处理的时候，所有的面都集合在一起。所以在面作旋转的同时需要对其进行Z轴的位移处理。

代码