近日，看到了css3中，設計動態立體盒子的例子，覺得比較新奇，所以研究了下，加以自己的拙見，設計了如圖所示的例子，拿來給大家分享：（此圖為firefox下的截圖）
這跟「3d盒子」的實現方式一樣，我的盒子也是以它為原型來設計的。
整個盒子的html結構很簡單，如下：後下
左前上右
一，盒子定位
首先初始化盒子的寬，高，背景色等，然後開始定位六個面，我是先從簡單的四個面開始，這四個面分別是「前、後、左、右」，最後定位「上、下」，定位四個比
較簡單的面的時候你會發現，前面跟後面「-moz-transform」屬性是一樣的，你只不過把top跟left屬性設定下就好了，當然，左面跟右面也
一樣。稍微有點不同的是上面跟下面，細心的可能會發現他們分別又巢狀了個div，這是因為他們不近要設定「skewy、scaley」還需要設定
「rotate」，當然他們是不能在乙個div裡寫，因為「旋轉」跟「斜切」他們之間會有影響。簡單的說
「旋轉後斜切」-moz-transform:rotate(-40deg) skew(30deg,20deg);
「斜切後旋轉」-moz-transform:skew(30deg,20deg) rotate(-40deg);
body
.cube
.backface,.bottomface div,.leftface,.frontface,.topface div,.rightface
.backface
.bottomface
.leftface
.frontface
.topface
.rightface
.bottomface div
.topface div
對於盒子的邊框線，這裡不建議用border來寫，因為如果用border來寫的話，border的寬度會跟width重疊，導致盒子佔據的空間為150+1+1=152px，，而且border也不貼著邊界，所以我建議用box-shadow來寫：
box-shadow與text-shadow一樣，只不過box-shadow給div等元素增加邊框線，而text-shadow給文字增加描邊。
舉個簡單的例子：
box-shadow:2px 0px 0px red,0px -2px 0px red,-2px 0px 0px red,0px 2px 0px red;
此引數跟padding、margin的引數類似，順序仍是上、右、下、左。
二、開啟盒子
開啟盒子的**也比較簡單，效果圖如下：
**如下：
.cube .frontface:hover
此外，我在盒子的底部還增加了投影的效果，如果需要的話可以增加試試。
因為我對色彩沒有什麼研究，所以做出來的盒子沒有那麼美觀，有興趣的朋友可以指點，幫忙美化下！
CSS3實現3D立體效果
css3實現3d效果 1.涉及到的幾個css3屬性 首先大家需要了解transform屬性，主要有平移 translate 縮放 scale 拉伸 skew 旋轉 rotate 這裡涉及到3d轉換的主要介紹旋轉。下面通過一組rotate效果直觀理解rotatex,rotatey,rotatez區別。...
css3動畫效果和3D模型
今天了解了css3的動畫漸變效果，如果我們要對頁面中的某個元素的樣式進行變化，就不用js或jquery苦苦的寫 了，直接用css3的這個transition這個屬性就ok，方便快捷，下面請看demo。我要對某個div操作，例如 當滑鼠移入div中，改變其width height和background...
css3的3D位移效果講解
lang en charset utf 8 3d位移的demotitle perspective 定義3d元素距離檢視的距離 以畫素為單位 當給乙個元素定義perspective屬性的時候，其 子元素 就獲得了乙個透視效果，元素本身並沒有 設定人眼到螢幕平面的距離，只影響3d元素，不影響2d元素 所...