不要給我說什麼底層原理、框架核心！老夫敲**就是一把梭！複製！貼上！拿起鍵盤就是幹！
哈哈o(∩_∩)o 通過乙個小小的demo學會css3新特性，實在不行那就複製貼上把。
首先在了解3d效果之前必須先知道2d的的屬性，因為3d效果是在二維變換的基礎上增加了z軸從而達到3d效果。
transform：有4個常用的方法
translate()
通過 translate() 方法，元素從其當前位置移動，根據給定的 left（x 座標） 和 top（y 座標）
rotate()
通過 rotate() 方法，元素順時針旋轉給定的角度。允許負值，元素將逆時針旋轉。
scale()
通過 scale() 方法，元素的尺寸會增加或減少，根據給定的寬度（x 軸）和高度（y 軸）
skew()
通過 skew() 方法，元素翻轉給定的角度，根據給定的水平線（x 軸）和垂直線（y 軸）
重點講下其中的translate()和rotate()也實現上面效果需要用到的
div
div
ok講完了 直接跳到3d部分
何為3d?
3d網際網路，也被成為（3dweb）它是一種立體的三維展示技術，是以計算機繪圖技術，在web瀏覽器上展現3d的物件，是通過在瀏覽器中內嵌3d虛擬場景的手段，在保證3d立體效果的同時，有效的降低對網路和硬體的要求，讓網際網路使用者能夠快速的體驗3d帶來的真實感受，並可讓使用者直接操控，作出如旋轉、移動、放大縮小等動作。
實現3d效果需要用到rotate3d(x,y,z,angle)，也可以寫作rotatex(angle)，rotatey(angle)，rotatez(angle)分開定義xyz的旋轉方向。2d的旋轉已經看過了接下來看看3d的旋轉效果
首先父級元素新增宣告3d的樣式
怎麼樣是不是覺得上面三張剛好就是組成乙個矩形的個個面板呢，接下來只需要把所有元素都定位到一起然後分開設定每個面板的rotate3d()屬性就行啦。
最後簡單說下動畫效果怎麼實現
首先宣告乙個動畫
@keyframes three_dimensional 50% 75% 100% }
本次案例的**如上，讓後通過animation把name加到樣式裡
div
我是singh，希望這篇文章能對你有幫助
CSS3 3D轉換效果
css3 中是通過transform style樣式屬性來實現 3d 立體效果的，為父元素設定了該屬性其子元素就會具有 3d 效果，對應的屬性值如下 舉個例子 實現乙個正方體效果 主要是通過父元素的四條邊和前後面來構成正方體的六個面，再結合transform style 平移和旋轉等方法就可以實現。...
css3 3d翻轉效果
3d變換 perspective 透視，視角 屬性定義 3d 元素距檢視的距離，以畫素計。該屬性允許您改變 3d 元素檢視 3d 元素的檢視。決定了你所看到的是2d transform 還是3d transform 視距 perspective 和translatez 視距就是眼睛距離物體原本位置的...
css3 3D文字效果
text shadow x offset y offset blur size color x代表x軸上的位移，y代表y軸上的位移，可為負值 blur表示投影的寬度，不能為負值 color為投影的顏色 多重投影 text shadow wei astyle head body div id wei ...