1.CSS3變形
變形簡介
（1）CSS3變形是一些效果的集合，如平移、旋轉、縮放、傾斜效果，每個效果都可以稱爲變形（transform），它們可以操控元素髮生平移、旋轉、縮放、傾斜等變化。
語法：transform：[transform-function]*；
（1）transform-function：設置變形函數，可以是一個也可以是多個，中間用逗號隔開
①translate（）：平移函數，基於x、y座標重新定位元素的位置
②scale（）：縮放函數，可以使用任意元素對象尺寸發生變化
③rotate（）：旋轉函數，取值是一個度數值
④skew（）：傾斜函數，取值是一個度數值
（2）transform 3D變形函數：translate3d（）平移函數、scale3d縮放函數、rotate3d旋轉函數
2D變形的瀏覽器兼容性
2D變形
（1）2D位移：將元素從一個位置上移動到另一個位置上
語法：translate（tx，ty）;
①tx：橫座標移動的向量長度，正值向右，負值向左
②ty：縱座標移動的向量長度，正值向下，負值向上
③tx、ty常用單位是px，也可以是百分比
（2）當translate（）函數只有一個值的時候，表示水平偏移；如果只設置垂直偏移，就必須設置第一個參數爲0，第二個值是垂直偏移量
2D縮放
（1）scale（）函數能夠用來縮放元素的大小，該函數包含兩個參數值，分別用來定義寬度和高度的縮放比例，默認值爲1,0~0.99都可以縮小，比1大的都可以放大。
（2）當只有一個值時，第二個值默認與第一個值相等。
語法：scale（sx，sy）或scale（sx）
2D傾斜
（1）sked（）函數能夠讓元素傾斜顯示，可將一個對象以其中心位置圍繞着x軸和y軸按照一定的角度傾斜
語法：skew（ax，ay）或skew（ax）
括號裏的是角度值，單位用deg（°）表示
（2）元素不會旋轉，會改變元素的形狀
2D旋轉
（1）rotate（）函數能夠讓元素在二維空間裏繞着一個指定角度旋轉，這個元素對象可以是行內元素也可以是塊元素。正值順時針，負值逆時針
語法：rotate（a）；
（2）只旋轉不改變元素的形狀
2.CSS3過渡
Transition呈現的是一種過渡，是一種動畫轉換的過程，如漸現、漸弱、動畫快慢等
瀏覽器兼容性
過渡屬性的使用
（1）transition屬性是複合屬性。通過指定屬性的初始狀態和結束狀態在兩個狀態之間進行平滑過渡的方式來實現動畫。
語法：transition：[transition-property transition-duration transition-timing-function transition-delay]
①transition-property：指定過渡或動態模擬的CSS屬性
常取值：
A:IDENT：指定的CSS屬性（width、height、background-color屬性等）
B:all：指定所有元素支持transition-property屬性的樣式，一般爲了方便都會使用all
②transition-duration：指定完成過渡所需要的時間，即從設置舊屬性到換新屬性所花費的時間，單位是s
③transition-timing-function：指定過渡函數，用來指定瀏覽器的過度速度，以及過渡期間的操作進展情況
常取值：
A:ease：元素樣式從初始狀態過渡到終止狀態時速度由快到慢，逐漸變慢（是默認值）
B:linear：元素樣式從初始狀態過渡到終止狀態時速度恆速，（勻速運動）
C:ease-in：元素樣式從初始狀態過渡到終止狀態時速度越來越快（漸顯效果）
D:ease-out：元素樣式從初始狀態過渡到終止狀態時速度越來越慢（漸隱效果）
E:ease-in-out：元素樣式從初始狀態過渡到終止狀態時速度先加快再減速（漸現漸隱效果）
④transition-delay：指定過渡開始出現的延遲時間。指定動畫開始執行的時間，也就是說，當改變元素屬性值後多長時間去執行過渡效果
A:正值：元素過渡效果不會立即被觸發，當過了設置的時間值後纔會觸發
B:負值：元素過渡效果會從該時間點開始顯示，之前的動作被截斷
C:0：默認值，元素過渡效果立即執行
過度的觸發機制
（1）僞類觸發：hover、active、focus、checked等
（2）媒體查詢：可以通過@media屬性判斷設備的尺寸，方向
（3）JavaScript觸發：用JavaScript腳本觸發
