css3屬性

　　

瀏覽器的內核

　　　　谷歌的內核：webkit

　　　　Firefox（火狐）的內核：Gecko

　　　　ie的內核：Trident

　　　　opera（歐朋）的內核：presto

　　　　國內瀏覽器的內核：webkit

　　　　注意：css3並非全部的瀏覽器都兼容

針對同同樣式（css3） 在不一樣瀏覽器的兼容，須要在樣式的屬性前加上他的內核前綴

　　　　谷歌的前綴：-webkit-transition

　　　　opera(歐朋)的前綴：-o-transition

　　　　火狐（Firefox）的前綴：-moz-transition

　　　　ie的前綴：-ms-transition;

css3中的過渡屬性：（transition）

　　　　過渡屬性的注意事項：時間要加單位；

　　　　過渡的屬性有四個：

　　　　　　屬性名稱（transition-property）；　　時間(transition-duration)；　　速度(traisition-timing-function)；　　

　　　　　　延遲(transition-delay)；

　　　　　　css3中的屬性基本上均可以簡寫（相似於background）

　　　例如：

　　　　transition:width 2s linear 0s　　　　(解析：經過各類途徑，只要改變了某元素的寬，都會執行此代碼，的寬；2秒內執行完，勻速，0秒的延遲)

　　　　-webkit-transition:width 2s linear 0s　　（兼容谷歌，（谷歌的transition前綴能夠省略））；

　　　　-o-transition:width 2s linear 0s　　　　(兼容歐朋)

　　　　-moz-transition:width 2s linear 0s 　　　　(兼容火狐)

　　　　-ms-transition:width 2s linear 0s　　　　(兼容ie)

　　小案例：

　　　　

　　　　   

　　　　　　

 

　　　　效果是：

 

　animation：動畫屬性的簡寫     （css3添加動畫要寫@keyframes(必定要加前綴)）

　　　　動畫屬性有4個：

　　　　　　動畫名稱(用於@keyframes)（animation-name）;　　規定動畫完成的週期（animation-duration）；　　規定動畫的速度（animation-timing-function）

　　　　　　動畫不執行時的樣式（animation-fill-mode）；　　延遲幾秒執行動畫（animation-delay）；　　規定動畫的執行次數（animation-iteration-count）；

　　　　　　下一個週期是否逆向執行（animation-direction）；　　規定動畫運行或暫停（animation-play-state）；

 小案例：

　　

2D和3D

　　transform:　　適用於2d和3d轉換的元素；

　　c3種的3d和2d特效都是方法（函數）

　　2d種提供了4個方法；

　　　　transform:translate()　　平移，兩個參數在x軸平移的距離    在y軸平移的距離  ，translateZ()　　在z軸平移的距離

　　　　transform：rotate()　　旋轉，參數是number deg（角度）　　rotateX()　　x軸旋轉   (依此類推)

　　　　transform：scale()　　縮放，兩個參數（5）x/y都是5倍   （5，1）　　x是5倍，y是1倍；（放大）　　（.3）　　縮小

　　　　transform：skew()　　拉伸，兩個參數 （xdeg，ydeg）；

　　　　注意：transform屬性，只能應用於簡寫，不能分開寫，不然後者將會覆蓋前者； 

　　3d的原理：近大遠小；

　　　　視距：物體於視網膜的距離

　　　　-webkit-perspective：透鏡（視距）(必定要加前綴)(這個屬性必須加在父級的元素上面且儘可能不要寫在body上)　　flat(2d);

　　　　-webkit-transform-style:preserve-3d;     （內部子元素成3d效果）

　　　　若是該元素有3d的效果：perspective的視距給他的父級元素；

　　　　transform-origin（）　　兩個參數，旋轉位置的修改；讓內部的子元素跟父級3d

　　　　backface-visibility:hidden;　　元素不面對屏幕時是否可見；