3D立方体

知识点：

1. perspective属性 [http://www.w3cplus.com/css3/transform-basic-property.html]
2. transform-style
3. transform-origin
4. transform
5. translate（X,Y,Z）
6. rotate（X,Y,Z）

首先把立方体的每个面布局好：
第一面和第6面是重合的。

平面图

html模板：

    

        
1
        
2
        
3
        
4
        
5
        
6
    

然后通过3D变换把每一个面进行旋转等变换。

其中，比较重要的几个点需要注意：

1. 必须在父元素中添加 perspective属性 ，才能看出3D效果。原因请看知识点链接。
2. 必须设置-webkit-transform-style 属性为 preserve-3d。
3. 注意每一个面旋转的基点或基线。通过transform-origin属性来设置。

最后，我们通过把立方体旋转来查看效果。

所以，css代码如下：

.wrap{ width: 200px; height: 200px; border: 1px solid #000; padding: 200px;
      -webkit-perspective:800px; }

.box{ width: 200px; height: 200px; position: relative;
     -webkit-transform-style: preserve-3d; transition: 3s all;
     -webkit-transform: translateZ(-100px) rotateX(0deg);}

.box div{ width: 200px; height: 200px; position: absolute; font-size: 100px; font-weight: bold;     line-height: 200px; text-align: center; color: #fff; }

.box div:nth-of-type(1){ background:red; top: -200px; left: 0;
         -webkit-transform-origin: bottom; -webkit-transform: translateZ(100px) rotateX(90deg);}

.box div:nth-of-type(2){ background: blue; top: 0; left: -200px;
        -webkit-transform-origin: right; -webkit-transform: translateZ(100px)  rotateY(-90deg);}

.box div:nth-of-type(3){ background: yellow; top: 0; left: 0;
        -webkit-transform: translateZ(100px) }

.box div:nth-of-type(4){ background: green; top: 0; left: 200px;
        -webkit-transform-origin: left; -webkit-transform: translateZ(100px)  rotateY(90deg);}

.box div:nth-of-type(5){ background: pink; top: 200px; left: 0px;
        -webkit-transform-origin: top; -webkit-transform: translateZ(100px)  rotateX(-90deg);}

.box div:nth-of-type(6){ background: #f60; top: 0; left: 0;
        -webkit-transform: translateZ(-100px) rotateX(180deg); }

.wrap:hover .box{ -webkit-transform: translateZ(-100px) rotateX(180deg); }

效果图

不过，这样写是比较繁琐的。下面是简单一点的写法，不需要将每个面的偏移都写好。

这里只做了4个面。
css改进:

.wrap{ width: 200px; height: 200px; border: 1px solid #000; padding: 200px;
      -webkit-perspective:800px; }

.box{ width: 200px; height: 200px; position: relative;
     -webkit-transform-style: preserve-3d; transition: 3s all;
     -webkit-transform: translateZ(-100px) rotateX(0deg);}

.box div{ width: 200px; height: 200px; position: absolute; font-size: 100px; font-weight: bold;     line-height: 200px; text-align: center; color: #fff; left: 0; top: 0; }

.box div:nth-of-type(1){ background:red;-webkit-transform: translateZ(100px);}

.box div:nth-of-type(2){ background: blue; -webkit-transform-origin:top; -webkit-transform: translateZ(-100px) rotateX(90deg); }

.box div:nth-of-type(3){ background: yellow; -webkit-transform: translateZ(-100px); }

.box div:nth-of-type(4){ background: green; -webkit-transform-origin:bottom; -webkit-transform: translateZ(-100px) rotateX(-90deg); }

.wrap:hover .box{ -webkit-transform: translateZ(-100px) rotateX(180deg); }

3D立方体效果结束

不积跬步无以至千里