简单介绍一下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
布局
<div class="container">
<div class="box">
<figure class="pic1"></figure>
<figure class="pic2"></figure>
<figure class="pic3"></figure>
<figure class="pic4"></figure>
<figure class="pic5"></figure>
<figure class="pic6"></figure>
</div>
</div>
主要的css属性设置步骤
- container设置perspective，指明视点位置
- box设置transform-style:preserve-3d 指明元素进行3的变换
-
每个figure设置旋转的角度，对每个面进行转向，但是此时的各个面都是交叉在一起的，所以需要让他们各自向自己的正面平移自身一半的距离：translateZ(??px)
GIF.gif
<style>
.containerBox{width:200px;height:200px;position: absolute;top:50%;right:50%;margin-left:200px;margin-top:-100px;perspective: 600px;perspective-origin: top;}
.box{width:100%;height:100%;transform-style: preserve-3d;animation: Rotate 5s infinite alternate;}
.box>figure{position:absolute;border-radius: 20px/30px;overflow: hidden;}
.pic1{transform:rotateX(0deg) translateZ(100px);}
.pic2{transform:rotateY(90deg) translateZ(100px);}
.pic3{transform:rotateY(-90deg) translateZ(100px);}
.pic4{transform:rotateY(180deg) translateZ(100px);}
.pic5{transform:rotateX(90deg) translateZ(100px);}
.pic6{transform:rotateX(-90deg) translateZ(100px);}
@keyframes Rotate{
from{transform: rotateX(0deg) rotateY(0deg);}to{transform: rotateX(360deg) rotateY(360deg);}
}
</style>
<section class="containerBox">
<div class="box">
<figure class="pic1"><img width="200px" height="200px" src="http://img.hb.aicdn.com/42874341c1036dd59c89dcff510ae5c189b5212620f66-3yFH15_fw658" alt="this is the 3d box picture"></figure>
<figure class="pic2"><img width="200px" height="200px" src="http://img.hb.aicdn.com/010d0fb807fe78ab2fac43119b47fb8ef0188673a084f-zdabhv_fw658" alt="this is the 3d box picture"></figure>
<figure class="pic3"><img width="200px" height="200px" src="http://img.hb.aicdn.com/b7989683adb98ed83c8332f9ea2bf7ac4b7086f394ef-5XdGQL_fw658" alt="this is the 3d box picture"></figure>
<figure class="pic4"><img width="200px" height="200px" src="http://img.hb.aicdn.com/f600e0e8621fc2745474d20a800f9c1c365333f216f2a-0U4557_fw658" alt="this is the 3d box picture"></figure>
<figure class="pic5"><img width="200px" height="200px" src="http://img.hb.aicdn.com/c07b81d1a2cb4fa062e4f0ab2e5b820748e18115fcab-tvlISc_fw658" alt="this is the 3d box picture"></figure>
<figure class="pic6"><img width="200px" height="200px" src="http://img.hb.aicdn.com/b4e03c1f7f5a77cf0bdb0b0492cd187d76fd0d4f18d36-YLOSJx_fw658" alt="this is the 3d box picture"></figure>
</div>
</section>
