一.CSS3變形transform

1.平移：translate(x,y) translateX(x) translateY(y)

注意：如果想只向X軸平移那麼可以translateX，如果想只向X軸平移那麼可以translateY，X和Y不能共存。如果想向兩個方向平移，那麼使用translate

y軸
^ -
|
|
|
|
|
|
- ---------------------------------> + x軸
|
|
|
|
|
| +

2.縮放： scale(x放大倍數，y放大倍數) scaleX(x放大倍數) scaleY(Y放大倍數)

注意：如果想放大那麼寫大於1的數，如果想縮小，那麼寫小於1的數

3.傾斜： skew(x軸傾斜角度，y軸傾斜角度) skewX(x軸傾斜角度) skewY(y軸傾斜角度)

注意：x軸為正值按照逆時針x軸為負值按照順時針，y軸正值為順時針傾斜，y軸負值為逆時針傾斜

4.旋轉： rotate(旋轉角度) 正值為順時針旋轉，負值為逆時針旋轉

二.CSS3過渡

transition:需要過度的屬性 過度時間(s) 過度動畫函式 延遲時間(s)

過渡動畫函式：
ease：速度由快到慢（預設值）
linear：速度恆速（勻速運動）
ease-in：速度越來越快（漸顯效果）
ease-out：速度越來越慢（漸隱效果）
ease-in-out：速度先加速再減速（漸顯漸隱效果）

img:hover{
transform: rotate(90deg) scale(1.2);
transition: all 1s linear 1s;
}

過渡處罰機制：
偽類觸發
：hover
：active
：focus
：checked

媒體查詢：通過@media屬性判斷裝置的尺寸，方向等
JavaScript觸發：用JavaScript指令碼觸發

三.CSS3動畫

1.設定關鍵幀
@keyframes 關鍵幀名稱{
0%{
width: 0;
transform: scale(1.5);
}
33%{
width: 60px;
transform: translate(200px,0px) scale(2);
}
66%{
width: 120px;
transform: translate(300px,0px);
}
100%{
width: 200px;
transform: translate(400px,0px);
}
}
2.呼叫關鍵幀
animation: 關鍵幀名稱 執行時間 播放方式 延遲時間 播放次數;