一、transform：需要結合translate、scale、rotate、skew四個函數使用
1. translate：平移
1) translateX：水平位移，屬性值爲像素值，如果是正數，表示向右，否則表示向左
2) translateY：垂直位移，屬性值爲像素值，如果是正數，表示向下，否則表示向上
3) 複合屬性translate(值)，如果是一個值表示水平，如果是兩個值，值和值用逗號分隔，第二個值表示垂直
2. scale：縮放，屬性值數值，1表示不縮放，小於1表示縮小，大於1表示放大，簡言之，屬性值表示變化的倍數
1) scaleX：寬度的縮放
2) scaleY：高度的縮放
3) 複合屬性scale（值），如果寫一個值，該值表示寬度和高度，如果寫兩個值，第一個值表示寬度，第二個值表示高度
3. rotate：旋轉，屬性值爲度數，格式transform：rotate(度數deg)，如transform：rotate(30deg)
4. skew：拉伸，格式shew（角度deg）
1) skewX：沿X軸拉伸
2) skewY：沿Y軸拉伸
3) 複合屬性skew：格式爲skew（值），如果寫一個值，該值表示沿X軸拉伸，如果寫兩個值，那麼第一個值表示沿X軸拉伸，第二個值表示沿Y軸拉伸
二、transform-origin：設置元素變形時的參照物，設置爲left、center、right、top、center、bottom，也可以是像素值，格式transform-origin:水平的值 垂直的值
三、transition屬性：設置元素的漸變效果（過渡效果）
1. transition-property：設置允許哪些屬性可以有漸變的效果，屬性值可以是CSS屬性名稱、all、none
2. transition-duration：設置漸變的時間，屬性值爲秒（如5s）或毫秒（如5000ms），如果省略，默認爲0，1秒=1000毫秒
3. transition-timing-function：設置過渡方式
1) ease：規定慢速開始，然後變快，然後慢速結束的過渡效果
2) linear：規定以相同速度開始至結束的過渡效果
3) ease-in：規定以慢速開始的過渡效果
4) ease-out：規定以慢速結束的過渡效果
5) ease-in-out：規定以慢速開始和結束的過渡效果
4. transition-delay：設置延遲時間，屬性值爲秒或毫秒
5. transition的複合屬性，格式爲：transition：property duration timing-funciton delay
四、animation：動畫屬性，使用時需要先創建動畫幀
創建動畫
@keyframes 動畫名稱{
動畫執行時的不同階段（可以用from和to表示，也可以用百分比表示）
}
例 @keyframes 動畫名稱{
from{
}
..
to{
}
應用動畫
1. animation-name：設置動畫名稱
2. animation-duration：設置動畫執行所需時間，屬性值爲秒或毫秒
3. animation-timing-function：規定動畫的速度曲線，默認爲ease，作用和transition-timing-function一樣
4. animation-delay：設置動畫延遲時間，屬性值爲秒或毫秒
5. animation-iteration-count：設置動畫執行次數，屬性值就是次數，如果寫infinite表示無限次
6. animation-direction：設置動畫方向，屬性值爲normal（正常）、alternate（反向），注意如果要有反向效果，那麼次數必須是2次以上（包含2次）
7. animation複合屬性，格式爲：animation：name duration timing-function delay count direction