首先，我們來看一下今天我們使用3D變形要實現(xiàn)的兩種3D空間效果：

　　第一種不帶特效處理的"魔方"：

　　如下圖所示：

　　接著我們看下稍做特效處理之后的一種效果：(此處因生成gif動態(tài)圖,所以，效果看起來比網(wǎng)站投射出來的效果要差些，在桌面端運行就不會有問題了)；

　　如下圖所示：

　　有沒有覺得三維空間3D立體效果很炫呢？帶著疑問，我們一塊來看一下實現(xiàn)思路吧！

　　首先，我們來學(xué)習(xí)幾個3D變形當(dāng)中的幾個屬性知識點；學(xué)習(xí)3D效果之前，我們來看一張三維空間圖片，這是一張三維空間的基本圖，分別有x軸、y軸、z軸三個方向；

　　3D平移 translate

　　3D平移分別有三個方向：

　　第一個方向：translateX(x) 定義 3D 轉(zhuǎn)化，僅使用用于 X 軸的值，以X軸平移；

　　看下代碼中所示，例如我們創(chuàng)建了一個div標簽(我們在div上添加一行字，叫做"我是文字"，方便待會兒查看角度)，然后設(shè)置其屬性為：

　　然后，我們來看一下3D平移，該場景下的運行效果(注意：主要看下鼠標滑到div上時的一個平移效果);

　　第二個方向：translateX(Y) 定義 3D 轉(zhuǎn)化，僅使用用于 Y 軸的值，以Y軸平移；這個和以X軸方向差不多，也就是上下平移，如果平移的負值，則往Y軸的負方向，也就是往下平移，反之，向上平移(這個地方就不做圖解演示說明)；

　　第三個方向：translateZ(z) 定義 3D 轉(zhuǎn)化，僅使用用于 Z 軸的值，以Z軸平移；對于這個角度的值，就得有三維空間的想象力了，那么，往Z周的正方向來平移，也就是相當(dāng)于與我們眼睛目視前方的距離越來越近；做個實例，我們來看一下；我們還是使用上面這個已經(jīng)創(chuàng)建好的div標簽，稍作修改，看下效果；

　　注意：在使用translateZ平移時，一定要定義一個透視點作為參照物以及開啟3D視圖；

　　同樣，我們來看一下3D平移，該場景下的運行效果(注意：主要看下鼠標滑到div上時的一個距離我們越來越近的平移效果 Z軸正方向)；

　　3D旋轉(zhuǎn) rotate

　　rotateX(angle) 定義沿 X 軸的 3D 旋轉(zhuǎn)。

　　同樣，我們還是以上面這個div為例，只需要將里面的transform部分修改為rotateX，沿X軸旋轉(zhuǎn)；(只看修改代碼的部分)

　　我們來看下沿X軸旋轉(zhuǎn)的效果；

　　rotateY(angle) 定義沿 Y 軸的 3D 旋轉(zhuǎn)。(這個只需要將上面代碼中的rotateX修改為rotateY即可，我們看下沿Y軸旋轉(zhuǎn)的效果)；

　　rotateZ(angle) 定義沿 Z 軸的 3D 旋轉(zhuǎn)。(這個只需要將上面代碼中的rotateY修改為rotateZ即可，我們看下沿Z軸旋轉(zhuǎn)的效果)注意：Z軸的空間是哪個角度；

　　ok，學(xué)完了3D平移和3D旋轉(zhuǎn)屬性之后，我?guī)е蠹乙粔K實現(xiàn)一下"魔方"；

　　首先，我們需要創(chuàng)建6個div標簽，代表魔方的六個面，記得在底部嵌套兩個div，便于待會兒做旋轉(zhuǎn)使用；

　　然后，設(shè)置各個div的相關(guān)屬性，注意：因為要使用到往Z軸平移，所以，記得開啟3D視圖；

　　接著，設(shè)置"魔方"的幾個面自己的屬性，也就是各個面小div的屬性；先設(shè)置三個面看看效果；同時讓六個div上一個的div發(fā)生旋轉(zhuǎn)角度，便于我們觀看；

　　效果如下圖所示：

　　寫到這兒，已經(jīng)有了立體空間的感覺了......我們接著把其余三個面也給補上，看看效果；

　　效果如下圖所示：

　　我們需要在"魔方"每個面div里嵌套一個img標簽，用來顯示圖片即可，看下效果；

　　接著，我們需要讓其最底部的div沿Y軸方向旋轉(zhuǎn)，看看效果；

　　最后，我們添加截取div邊框圓角的屬性，以及設(shè)置陰影發(fā)光顏色，將大功告成了！

　　最終效果如下：