6、3D轉換
屬性:
perspective : 設置假定人眼到投影平面的距離
只影響3D元素，不影響2D元素

設置位置：加在父元素上，設置好後，其子元素就可以完成3D的轉換。
1、3d位移
改變元素在z軸上的位置
屬性：transform:
函數：translateZ(z);
translate3d(x,y,z);
2、3d旋轉
屬性：transform
函數：
rotateX(deg);
rotateY(deg);
rotateZ(deg)
rotate3d(x,y,z,deg);
x,y,z : 取值為 1，0，-1
rotate3d(-1,0,1,45deg);
****************************************************
1、過渡
1、什麽是過渡
元素從一個【狀態】到另外一個【狀態】的【平滑變換】【過程】
2、過渡屬性
transition
3、過渡4要素(子屬性)
1、過渡屬性
元素的哪個【狀態】發生變化時要使用過渡的效果
當指定的屬性發生改變時，就會觸發過渡效果
語法：
transition-property:none | all | property
transition-property:background;
2、過渡時間
整個過渡效果在多長時間內完成，以 秒(s)或毫秒(ms)為單位
語法：
transition-duration: s|ms;
transition-duration:1s;
註意：
過渡時間默認為 0 ，如果為0時，則沒有過渡的效果產生。
如果想看到過渡效果，則必須設置該屬性。
3、過渡函數
指定時間內(transition-duration)過渡的速度效果。
語法：
transition-timing-function
取值：
ease : 默認值，慢速開始，速度變快，慢速結束
linear:勻速開始到結束
ease-in:慢速開始，加速效果(由慢到快)
ease-out:慢速結束，減速效果(由快到慢)
ease-in-out:以慢速開始和結束，先加速再減速
4、過渡延遲
當過渡操作被激發後，等待多長時間後才開始執行效果
語法：transition-delay
以秒或毫秒作為單位
5、統一設置過渡效果
屬性：
transition:
用於設置四個過渡子屬性
transition:transition-property transition-duration transition-timing-function transition-delay;
transition:width 2s linear 0s;

transition:prop dura timing delay;
4、觸發過渡
過渡效果由用戶的行為進行觸發(點擊、鼠標懸停)
4、多個過渡效果
transition-property:prop1,prop2;
transition-duration:t1,t2;
transition-timing-function:fun1,fun2;
transition-delay:delay1,delay2;
2、動畫
1、什麽是動畫
將元素的多個狀態放在一起進行運行(多個狀態間的轉換)
過渡：實現簡單的動態效果
動畫：實現復雜的動態效果
註意：瀏覽器兼容性
Chrome 和 Safari : -webkit-
Firefox : -moz-
Opera : -o-
實現動畫的步驟:
1、聲明動畫
@keyframes
聲明整個動畫過程中的不同狀態都是什麽
2、調用動畫
通過 animation 屬性 調用已聲明動畫
2、關鍵幀
語法：@keyframes 規則聲明動畫
<style>
@keyframes 動畫名稱{
/*定義關鍵幀即不同時間點上的動畫狀態*/
from | 0%{
/*動畫的開始狀態(樣式)*/
}
/*...若幹關鍵幀*/
20%{
/*動畫在執行到20%的時候的狀態(樣式)*/
}
25%{

}
26%{

}

to | 100%{
/*動畫結束時候的狀態(樣式)*/
}
}

@-webkit-keyframes changeBack{

}
@-moz-keyframes changeBack{

}
@-o-keyframes changeBack{

}
</style>
3、動畫屬性(調用)
1、animation-name : 調用動畫的名稱，指定 @keyframes 的名字
2、animation-duration:動畫執行的時常以 s或ms
3、animation-timing-function:動畫執行時的速度效果
取值 ease,linear,ease-in,ease-out,ease-in-out
4、animation-delay:延遲時間，以s或ms為單位
5、animation-iteration-count
動畫執行的次數
取值 ：
1、具體數值
2、infinite : 無限次播放
6、animation-direction : 動畫播放方向
取值：
normal
alternate :
奇數次播放為正向播放(狀態從from - to)
偶數次播放為逆向播放(狀態從to - from)
7、動畫綜合屬性 : animation
ainimation:name duration timing-function delay iteration-count direction;
ainimation:second 2s linear 2s infinite;
8、animation-fill-mode
指定動畫在播放之前或之後的效果
none : 默認行為
forwards:動畫完成後，保持最後一個狀態
backwards : 動畫顯示之前，保持在第一個狀態
both:動畫完成後，動畫顯示前，都被相應的狀態所保持著。

9、animation-play-state
定義動畫播放狀態
配合著 Javascript使用，用於播放過程中暫停動畫
取值：
paused ：暫停
running ：播放

常見的css3動畫樣式