HTML5－36d嗨起^_^

若是一個前端不會寫css那必然會被貽笑大方，利用html5新增的一些c3屬性能夠作許許多多炫酷的效果.

你們先看我寫的一個小demo:  http://zpf92.github.io/build/

這個demo裏面運用了最重要的2個屬性， 分別transform-style和perspective。

1、關於3d試圖

transform-style: flat|preserve-3d;

flat(默認，二維效果) / preserve-3d(三維效果)。設置一個元素的transform-style:preserve-3d;隻影響這個元素的子元素(若是孫元素也有3d效果，那麼還必須給子元素設置preserve-3d)。這樣全部子元素均可以相對與父元素的平面進行3d變形操做。和二維變形同樣，三維變形可使用transform屬性來設置。能夠經過制定的函數或者經過三維矩陣來對元素變型。列舉幾個函數：

1. translate3d(x,y,z) 使元素在這三個緯度中移動,也能夠分開寫：

　　如：translateX(length),translateY(length), translateZ(length)。注意z軸的值只能爲px;

2 .scale3d(number,number,number) 使元素在這三個緯度中縮放，也可分開寫：

　　如：scaleX(),scaleY(),scaleY()。

3. rotate3d(x,y,z,angle) 使元素在這三個緯度中旋轉,也能夠分開寫：

　　如：rotateX(angle),rotateY(angle),rotateZ(angle)

這裏我我也寫了2個小demo方便你們操做與理解 　　

http://zpf92.github.io/build/rotate.html 

http://zpf92.github.io/build/translate.html 

2、透視/景深效果

perspective: number|none;

perspective爲一個元素設置三維透視的距離。僅做用於元素的後代，而不是其元素自己。當 perspective:none/0;時，至關於沒有設perspective。好比你要創建一個小立方體，長寬高都是200px。若是你的perspective < 200px ，那就至關於站在盒子裏面看的結果，若是perspective 很是大那就是站在很是遠的地方看 （立方體已經成了小正方形了）。當元素沒有設置perspective(length)時，全部後代元素被壓縮在同一個二維平面上，不存在景深的效果。若是設置perspective(length)後， 將會看到三維的效果。默認的透視視角中心在容器(是perspective所在的元素，不是他的後代元素)的中點，也就是perspective- origin: 50% 50%。固然你也能夠本身設置，好比：左上角-webkit-perspective-origin: 0px 0px；。

綜合以上兩點，咱們能夠經過幾個實例，來深刻了解下perspective(length); 和 transform-style:preserve-3d；

1. 當設置perspective(length);不設置transform-style:preserve-3d；當元素靜止時，會有立體的效果：

　　　　　　　　　　

 

2. 當設置perspective(length);不設置transform-style:preserve-3d；當元素旋轉時的效果：

　　　　　　　　　　

 

3. 當設置transform-style:preserve-3d；不設置perspective(length)；當元素靜止時，不會有立體的效果

　　　　　　　　　　　　　　

 

4. 當設置transform-style:preserve-3d；不設置perspective(length)；當元素旋轉時的效果：

　　　　　　　　　　

5. 只有當兩個值都設置，無論是靜止仍是旋轉，都會看到立體的效果。此外還要注意幾點

　　1. 若是父元素設置overflow：hidden；那麼子元素就沒法跳出父元素的平面，也就不能出現3D效果。就如同，transform-style：flat；

　　2. 子元素是定位元素，參照物會尋找上層的定位元素，若是沒有定位父元素則找最近的帶有transform屬性的元素。