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

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

　　如下圖所示：

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

　　如下圖所示：

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

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

　　3D平移 translate

　　3D平移分別有三個(gè)方向：

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

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

　　然后，我們來(lái)看一下3D平移，該場(chǎng)景下的運(yùn)行效果(注意：主要看下鼠標(biāo)滑到div上時(shí)的一個(gè)平移效果);

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

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

　　注意：在使用translateZ平移時(shí)，一定要定義一個(gè)透視點(diǎn)作為參照物以及開(kāi)啟3D視圖；

　　同樣，我們來(lái)看一下3D平移，該場(chǎng)景下的運(yùn)行效果(注意：主要看下鼠標(biāo)滑到div上時(shí)的一個(gè)距離我們?cè)絹?lái)越近的平移效果 Z軸正方向)；

　　3D旋轉(zhuǎn) rotate

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

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

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

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

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

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

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

　　然后，設(shè)置各個(gè)div的相關(guān)屬性，注意：因?yàn)橐褂玫酵鵝軸平移，所以，記得開(kāi)啟3D視圖；

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

　　效果如下圖所示：

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

　　效果如下圖所示：

　　我們需要在"魔方"每個(gè)面div里嵌套一個(gè)img標(biāo)簽，用來(lái)顯示圖片即可，看下效果；

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

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

　　最終效果如下：