简单了解一下css3转换属性，尤其是3d效果的实现，本文主要以3d立方体的实现来了解一些css3的新增属性，可以帮助大家展示更为丰富的UI效果!

实现方法：

状态1：

首先创建一个立方体容器元素

transform-style 属性的定义为规定如何在3d空间中呈现被嵌套元素

flat为默认值平面显示，preserve-3d为子元素保留3d位置

也就是该属性在需要展示3d效果元素的父元素上设置

立方体的六个面

创建6个div元素设置相同绝对定位显示，为了效果明显每个面设置了0.5的透明度。

transform-origin 属性设置被转换元素的位置，可以理解为转换的中心点在哪个位置

状态2

为了显示出立方体的上下面和侧面需要对4个面进行绕X、Y轴的直角转换

可以给容器增加一定角度突出效果

状态3

撑开6个面，构建成为立方体

在每个面转换的基础上增加/减少宽高二分之一的Z轴位置转换

这样一个3d立方体就已经构建完成