一.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: 關鍵幀名稱 執行時間 播放方式 延遲時間 播放次數;