想進入css3的3d世界必須知道一下幾個屬性及其用法。
我想不用解釋了吧。之後要平移和旋轉都是在這個基礎之上的，認真看看吧騷年！！
perspective (英文解釋：透鏡，望遠鏡;觀點，看法;遠景，景色;洞察力)：在這裡做透鏡的意思。
persperctive:none/number;這是它的格式.在css預設是none。啥意思呢？很簡單，就是距離多遠看某個元素。none即沒有距離，所以預設情況下是沒有3d效果。當這個number的值越大就是越遠距離看元素!!聰明的人可能想到了下面乙個問題，既然是看某個元素，那這個perspective屬性是不是放在這某個值的父元素上呢？沒錯！！所以就引出乙個問題，css的3d效果的html結構一般是怎麼樣的？如下：
123簡單解釋一下：container的div是乙個大容器，persperctive的視角就是從該容器去看包含許多piece的piece-box容器！！給定乙個值以後就會從多遠的距離看這個piece-box容器！！4567
8910
你以為這樣就可以形成了3d效果了嗎？no
沒錯，它是css中3d的關鍵，transform-style預設是flat，如果你要在元素上視線3d效果的話，就必須用上transform-style: preserve-3d,否則就只是平面的變換，而不是3d的變換。即在剛才的piece-box上加上transform-style:preserve-3d;就會有3d效果了；
接下來介紹乙個還與3d有關的屬性：
由上面我們了解了perspective，而加上了這個origin是什麼，我們前面說的這個是眼睛離物體的距離，而這個就是眼睛的視線，我們的視點的不同位置就決定了我們看到的不同景象，預設是中心，為perspectice-origin: 50% 50%,第乙個數值是 3d 元素所基於的 x 軸，第二個定義在 y 軸上的位置！！！
此時你做的每乙個transform,translate,transiton,animation操作將都會是以3d效果出現。然而問題又來了,transform,translate,transiton,animation操作又有哪些？如何使用？真是乙個饅頭引發的血案啊。
CSS3新增2D和3D屬性
3d變形 css3 transform translatex x transform是css3中具有顛覆性的特徵之一，可以實現元素的位移 旋轉 傾斜 縮放，甚至支援矩陣方式，配合過渡和即將學習的動畫知識，可以取代大量之前只能靠flash才可以實現的效果。變形轉換 transform transfor...
CSS3動畫 3D旋轉
學了c3之後，簡單做了乙個3d旋轉的小demo.個人親猜測相容chrome firefox opera safari，沒有考慮ie。如果下面 有問題，可以在我的github檢視源 可以檢視網頁效果demo位址。如下 ccs3animation 3drotatetitle charset utf 8 ...
CSS3實現3D立體效果
css3實現3d效果 1.涉及到的幾個css3屬性 首先大家需要了解transform屬性，主要有平移 translate 縮放 scale 拉伸 skew 旋轉 rotate 這裡涉及到3d轉換的主要介紹旋轉。下面通過一組rotate效果直觀理解rotatex,rotatey,rotatez區別。...