簡(jiǎn)單介紹一下CSS3的3D功能，實(shí)現(xiàn)一個(gè)立方體盒子。

主角

css3盒子的主角當(dāng)然是transform相關(guān)的3d屬性，包括transform:translateX|Y|Z,rotateX|Y|Z等。具體相關(guān)屬性介紹可去W3C上查看。
今天用到的CSS屬性主要有以下幾個(gè)：

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

perspective

perspective和3D中的家透視息息相關(guān)，perspective：600px;設(shè)置的就是觀察點(diǎn)（類(lèi)似于眼睛）距離我們的3D元素的距離。
當(dāng)為元素定義 perspective 屬性時(shí)，其子元素會(huì)獲得透視效果，而不是元素本身。
所以需要在盒子外層用.containerBox進(jìn)行包裹并設(shè)置該屬性。

perspective-origin:x-axis y-axis;

瀏覽器的坐標(biāo)默認(rèn)為左上角是原點(diǎn)（0,0），豎直方向?yàn)閅軸，橫向?yàn)閄軸。
而css3d 中的各種變換是和transform-origin相關(guān)的，該屬性指定了變換的中心出于什么位置。此處不做詳解。
x-axis y-axis就是坐標(biāo)的表示，可能的值為：
X:left center right length %
Y:top center bottom length %
默認(rèn) 為50% 50%

根據(jù)視角位置的不同，看到的元素也不盡相同

.jpg

rotateXYZ 方向

rotate的方向是以X，Y，Z軸進(jìn)行旋轉(zhuǎn)的，具體的旋轉(zhuǎn)方向請(qǐng)看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屬性設(shè)置步驟

1. container設(shè)置perspective，指明視點(diǎn)位置
2. box設(shè)置transform-style:preserve-3d 指明元素進(jìn)行3的變換

3. 每個(gè)figure設(shè)置旋轉(zhuǎn)的角度，對(duì)每個(gè)面進(jìn)行轉(zhuǎn)向，但是此時(shí)的各個(gè)面都是交叉在一起的，所以需要讓他們各自向自己的正面平移自身一半的距離：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>