CSS3 3D盒子

简单介绍一下CSS3的3D功能，实现一个立方体盒子。

主角

css3盒子的主角当然是transform相关的3d属性，包括transform:translateX|Y|Z,rotateX|Y|Z等。具体相关属性介绍可去W3C上查看。
今天用到的CSS属性主要有以下几个：

perspective:??px;
perspecive-origin:x-axis y-axis;
transform-style:preserve-3d;
transform:rotateX(?deg) rotateY(?deg) translateZ(??px)

perspective

perspective和3D中的家透视息息相关，perspective：600px;设置的就是观察点（类似于眼睛）距离我们的3D元素的距离。
当为元素定义 perspective 属性时，其子元素会获得透视效果，而不是元素本身。
所以需要在盒子外层用.containerBox进行包裹并设置该属性。

perspective-origin:x-axis y-axis;

浏览器的坐标默认为左上角是原点（0,0），竖直方向为Y轴，横向为X轴。
而css3d 中的各种变换是和transform-origin相关的，该属性指定了变换的中心出于什么位置。此处不做详解。
x-axis y-axis就是坐标的表示，可能的值为：
X:left center right length %
Y:top center bottom length %
默认 为50% 50%

根据视角位置的不同，看到的元素也不尽相同

.jpg

rotateXYZ 方向

rotate的方向是以X，Y，Z轴进行旋转的，具体的旋转方向请看gif演示

GIF.gif

布局

主要的css属性设置步骤

1. container设置perspective，指明视点位置
2. box设置transform-style:preserve-3d 指明元素进行3的变换

3. 每个figure设置旋转的角度，对每个面进行转向，但是此时的各个面都是交叉在一起的，所以需要让他们各自向自己的正面平移自身一半的距离：translateZ(??px)

   
   
   GIF.gif