今天又來(lái)一了一篇關(guān)于3D效果的文章焕数，教你打造自己的3D旋轉(zhuǎn)盒
首先還是希望大家自己看看關(guān)于transform這個(gè)屬性的相關(guān)特性作用，張前輩已經(jīng)寫了詳細(xì)的教程递览，直接附上
http://www.zhangxinxu.com/wordpress/2012/09/css3-3d-transform-perspective-animate-transition/comment-page-1/
OK下面我們開始吧
首先我們創(chuàng)建如下的HTML基本骨架

<div id="container"> 
    <div id="box"> 
        <div class="plane front"></div> 
        <div class="plane back"></div> 
        <div class="plane top"></div> 
        <div class="plane bottom"></div>
        <div class="plane left"></div>
       <div class="plane right"></div>
   </div>
</div>

要體現(xiàn)出3D的那種近大遠(yuǎn)小的感覺，我們首先需要在id='container'的DIV中加入perspective:800px;(常用值)狗超，這個(gè)值越小近大遠(yuǎn)小的感覺會(huì)越明顯，到接近0時(shí)朴下，就會(huì)充滿熒屏努咐，就像你在眼前放一片葉子，很近的話殴胧，小小葉子就會(huì)充滿你的整個(gè)視野渗稍，從而看不見其他東西，正所謂一葉障目团滥，不見泰山竿屹。然后再加上一些其他基本樣式
CSS代碼：

#container {
  width:200px;
  height:200px;
  border:1px solid  #FF0; 
  position:relative;
  perspective:800px;
  margin:200px auto;}

這是看見的應(yīng)該只有一個(gè)黃色的正方形邊框。
然后id="box"這個(gè)div很顯然是這個(gè)旋轉(zhuǎn)的盒子主體灸姊，里面的6個(gè)div就是盒子的六個(gè)面拱燃，現(xiàn)在我們要做的就是如何旋轉(zhuǎn)和平移這六個(gè)面，是她拼接成一個(gè)立方體力惯。
首先我們跟這6個(gè)面加上基本樣式（長(zhǎng)碗誉、寬、顏色）

.plane{width: 100px;height: 100px;}
.front{background: pink;} 
.back{background: purple;} 
.top{background: red;} 
.bottom{background: black;} 
.left{background: yellow;} 
.right{background: green;}

那么得到將是下面的樣子

現(xiàn)在呢父晶，我們就需要將這6個(gè)面旋轉(zhuǎn)平移拼成一個(gè)立方體了哮缺，首先我們需要將id="box"這個(gè)div設(shè)置成3D模式呈現(xiàn)，即加入下面的css代碼：

#box {-webkit-transform-style:preserve-3d;
      transform-style:preserve-3d;margin:73px auto;}

然后我們將六個(gè)面相對(duì)于id="container"的DIV來(lái)個(gè)絕對(duì)定位诱建，在.plane的類中加入
position: absolute;

那么我們就會(huì)得到下面的效果：

好了現(xiàn)在就好比蝴蜓，你手里有6張正方形的卡片，疊在一起俺猿，現(xiàn)在你要怎么將每個(gè)面進(jìn)行不同的旋轉(zhuǎn)平移變成一個(gè)立方體的問(wèn)題茎匠，是不是馬上就有了思路，下面我們就需要用代碼來(lái)實(shí)現(xiàn)押袍。為了便于觀察诵冒，我們將加入如下代碼
現(xiàn)在我們將黃色的面也就是class="left"的面進(jìn)行以Y軸旋轉(zhuǎn)90度，得到下圖

  .left{background: yellow;transform: rotateY(-90deg) translateZ(60px);}

得到下圖：

我們的俯視圖將是這樣

.right{background: green;transform: rotateY(90deg) translateZ(60px);}

效果圖（左邊正視圖驱敲，右邊俯視圖）

現(xiàn)在就需要前后兩個(gè)面了铁蹈，從上面的俯視圖中我們可以知道，前后兩面不需要旋轉(zhuǎn)众眨，只需要平移即可握牧，代碼如下

.front{background: pink;transform: translateZ(60px);}
.back{background: purple;transform: translateZ(-60px);}

效果圖（左邊正視圖容诬，右邊俯視圖）

現(xiàn)在就只需要處理上下兩個(gè)面了，底面和頂面先都圍繞X軸旋轉(zhuǎn)90度

.top{background: red;transform: rotateX(90deg);}
.bottom{background: black;transform: rotateX(90deg);}

俯視圖如下

現(xiàn)在只需要沿腰，底面向下平移50度览徒，頂面向上平移50度就行了

.top{background: red;transform: rotateX(90deg) translateZ(50px);}
.bottom{background: black;transform: rotateX(90deg) translateZ(-50px)}

效果圖（效果圖都讓id='box'的div進(jìn)行了一定的旋轉(zhuǎn)，便于觀察）

現(xiàn)在我們把平移的長(zhǎng)度換成50px颂龙，每個(gè)面之間就不會(huì)再有縫隙了

 .plane{width: 100px;height: 100px;position: absolute;}
 .front{background: pink;transform: translateZ(50px);} 
 .back{background: purple;transform: translateZ(-50px);} 
 .left{background: yellow;transform: rotateY(-90deg) translateZ(50px);} 
 .right{background: green;transform: rotateY(90deg) translateZ(50px);} 
 .top{background: red;transform: rotateX(90deg) translateZ(50px);} 
 .bottom{background: black;transform: rotateX(90deg) translateZ(-50px)}

效果圖：

OK 已經(jīng)出來(lái)了习蓬，現(xiàn)在我們加上動(dòng)畫，讓這個(gè)盒子轉(zhuǎn)起來(lái)：

#container{
  width: 200px;height: 200px;
  border:1px solid yellow;
  margin:50px auto;
  position: relative;
  perspective:800px;} 
#box{
    -webkit-transform-style: preserve-3d;
    transform-style: preserve-3d;
    margin: 50px auto;
    animation:play 30s infinite linear ;}  
   /* 6個(gè)面 */
.plane{width: 100px;height: 100px;position: absolute;}
.front{background: pink;transform: translateZ(50px);} 
.back{background: purple;transform: translateZ(-50px);} 
.left{background: yellow;transform: rotateY(-90deg) translateZ(50px);} 
.right{background: green;transform: rotateY(90deg) translateZ(50px);}
.top{background: red;transform: rotateX(90deg) translateZ(50px);} 
.bottom{background: black;transform: rotateX(90deg) translateZ(-50px)} 

@keyframes play{ 
  to{transform: rotateX(360deg) rotateY(360deg);}
 } 

OK措嵌，盒子就自己轉(zhuǎn)起來(lái)了友雳，怎么樣，炫酷吧铅匹，我們可以用這個(gè)來(lái)做3Dbanner圖，3D的旋轉(zhuǎn)柱饺藤，3D的選項(xiàng)卡等等 如下圖：