css3實現3d效果 1. 涉及到的幾個css3屬性 首先大家需要了解transform屬性，主要有平移(translate),縮放(scale),拉伸(skew),旋轉(rotate)。 這裡涉及到3d轉換的主要介紹旋轉。 下面通過一組rotate效果直觀理解rotatex,rotatey,rotatez區別。 **： .box .box1 .box2 .box3 .stage
rotatex
rotatey
rotatez
效果如圖：
分析：仔細看上面代阿碼中，三個div框套在乙個id為stage的div父框中。父框即為舞台，我們假設站在舞台下面看表演，整個父框就是舞台，裡面的子元素就是演員，呈現出不同的姿態，面向我們的是rotatex，側身的rotatey，在螢幕螢幕滾動的是rotatez。
z軸其實就是我們眼睛看過去的方向。
stage裡面有個非常重要的屬性：
1）transform–style屬性指定巢狀元素是怎樣在三維空間中呈現,css規範裡面這樣規定：
flat 子元素將不保留其 3d 位置。
preserve-3d 子元素將保留其 3d 位置。
所以我們為了3d呈現，新增該屬性：
-webkit-transform-style:preserve-3d
2）perspective的中文意思是：透視，視角。我們透視點應該就在瀏覽器的前方。所以該屬性設定的距離越大，舞台離我們越遠，呈現的元素就會越小。
perspective屬性的存在與否決定了你所看到的是2次元的還是3次元的，也就是是2d transform還是3d transform。沒有透視，不成3d。
3）給子元素設定translatez。我們知道在2d變換中有translate屬性，這個也是一樣，只不過是順著z軸平移，也就是設定的translatez值越小，則子元素大小越小（因為元素遠去，我們眼睛看到的就會變小）；translatez值越大，該元素也會越來越大，當translatez值非常接近perspective設定的畫素，但是不超過該畫素的時候（如300畫素），該元素的大小就會撐滿整個螢幕。接下來我們會利用該屬性來調整子元素，實現乙個立方體的效果。
2. 立方體製作
立方體有六個面，如果舞台中立方體正對我們，我們只能看到乙個正面，也就是其他5個面都看不見。
我們通過**完成前面（本文**是在chrome瀏覽器測試，以下**能夠相容webkit核心和火狐瀏覽器）：
.box6
translatez讓平面向視點走100px。
所以第二個平面背面的**：
.box5
同理：兩個側面的**就是rotatey：90，同時左右分開100px畫素，**如下：
.box1
.box2
上下兩個平面，**：
.box3
.box4
再將開始的html頁面增加幾個div，調整一下：整體**如下：
.box
.box1
.box2
.box3
.box4
.box5
.box6
.stage
執行後效果如下：
我們剛開始說了，只能看到正面，現在我們如果將舞台旋轉起來，各個平面就可以一覽無餘了。
這裡給舞台div設定旋轉動畫：
-webkit-animation:mydonghua 5s ease infinite;
-moz-animation:mydonghua 5s ease infinite;
接下來定義mydonghua的行為：
@-webkit-keyframes mydhua
100%
} @-moz-keyframes mydhua
100%}
最終執行效果（此處截圖，應該是乙個反覆旋轉的動畫）：
小結 css3涉及到3d變換關鍵屬性：
1. perspective屬性，該屬性表示視點，該屬性調整我們視點的遠近。
2. rotate(degree)，旋轉分別繞x,y,z軸進行degree度旋轉。
3. transform-style可以設定元素所處的是3d空間還是平面。flat表示平面。
4. translatez 繞z軸平移，調整平面向自己所面向的方向移動的距離。如果取值為負值，表示平面向背向的方向移動一定距離。
CSS3實現3D盒子效果
近日，看到了css3中，設計動態立體盒子的例子，覺得比較新奇，所以研究了下，加以自己的拙見，設計了如圖所示的例子，拿來給大家分享 此圖為firefox下的截圖 這跟 3d盒子 的實現方式一樣，我的盒子也是以它為原型來設計的。整個盒子的html結構很簡單，如下 後下 左前上右 一，盒子定位 首先初始化...
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元素 所...