需要先了解的知識：
①了解CSS的2d下的transform變化下的平移（translate）和旋轉(zhuǎn)（rotate）跛溉。
②了解CSS的3d下的transform變化下的平移和旋轉(zhuǎn)。
③使用transform設(shè)置原點(diǎn)，旋轉(zhuǎn)依賴原點(diǎn)影晓。
④無論2d空間，還是3d空間檩禾，平移都不依賴原點(diǎn)挂签。
⑤2d空間下，旋轉(zhuǎn)依賴的是2d空間下的某一個(gè)點(diǎn)盼产。3d空間下饵婆，旋轉(zhuǎn)時(shí)依賴的是3d空間下的某一點(diǎn)，一般情況下戏售，都可以認(rèn)為3d空間下的旋轉(zhuǎn)是依賴于X軸或者Y軸或者Z軸進(jìn)行旋轉(zhuǎn)侨核。
分析：魔方由6個(gè)面構(gòu)成，需要將六個(gè)面組成立方體灌灾。
每一個(gè)面由3*3個(gè)小盒子構(gòu)成搓译。
起始需要將六個(gè)面都絕對定位到同一個(gè)位置，通過3dCSS平移紧卒、旋轉(zhuǎn)將六個(gè)面組成立方體侥衬。
設(shè)計(jì)出一個(gè)3*3個(gè)小盒子構(gòu)成的平面：
設(shè)計(jì)出9個(gè)小盒子并使用float的形式將九個(gè)小盒子合理的布局到平面中。
方案一：（先平移后旋轉(zhuǎn)） ? ?立體魔方案例一
①設(shè)計(jì)6個(gè)平面使用絕對定位到屏幕的同一位置跑芳。
②為每一個(gè)平面設(shè)計(jì)9個(gè)盒子排布到合理的位置（可以使用float或者inline-bolck或者絕對定位）轴总。
③通過先平移后旋轉(zhuǎn)的方式將六個(gè)面組成立方體。
④為包裹六個(gè)平面的盒子設(shè)置一個(gè)動(dòng)畫博个，立方體魔方將會旋轉(zhuǎn)展示怀樟。
方案二：（先旋轉(zhuǎn)后平移） ? ? ??立體魔方案例二
①設(shè)計(jì)6個(gè)平面使用絕對定位到屏幕的同一位置。
②為每一個(gè)平面設(shè)計(jì)9個(gè)盒子排布到合理的位置（可以使用float或者inline-bolck或者絕對定位）盆佣。
③通過先旋轉(zhuǎn)后平移的方式將六個(gè)面組成立方體往堡。
注意在三維立體中械荷，平面旋轉(zhuǎn)后，對應(yīng)的三個(gè)軸線（X虑灰、Y吨瞎、Z））將隨之移動(dòng)。
④為包裹六個(gè)平面的盒子設(shè)置一個(gè)動(dòng)畫穆咐，立方體魔方將會旋轉(zhuǎn)展示颤诀。
方案三：（先定原點(diǎn)后旋轉(zhuǎn)） ??立體魔方案例三
①設(shè)計(jì)6個(gè)平面使用絕對定位到屏幕的同一位置。
②為每一個(gè)平面設(shè)計(jì)9個(gè)盒子排布到合理的位置（可以使用float或者inline-bolck或者絕對定位）对湃。
③通過先設(shè)置原點(diǎn)后旋轉(zhuǎn)的方式將六個(gè)面組成立方體崖叫。
④為包裹六個(gè)平面的盒子設(shè)置一個(gè)動(dòng)畫，立方體魔方將會旋轉(zhuǎn)展示拍柒。
