transition 過渡 作為壹個復合屬性
1.transition-property 指定可以過渡的屬性
默認值是all 定義應用過渡效果的 CSS 屬性名稱列表，列表以逗號分隔。
2.transition-duration 指過渡完成的時間
默認值為0s
3.transition-timing-function 過渡的動畫類型
默認值為ease
ease 規定慢速開始，然後變快，之後慢速結束的過渡效果
ease-in 規定以慢速開始的過渡效果
ease-out 規定以慢速結束的過渡效果
ease-in-out 規定以慢速開始和結束的過渡效果
linear 規定以相同速度開始至結束的過渡效果
cubic bezier(n,n,n,n) 在cubic-bezier函數中定義自己的值
4.transition-delay 延遲執行過渡的時間
默認值為0s
二、transform屬性
transform 向元素應用2D或3D轉換 只對block級元素生效
1.translate 位移
translateX() 在x軸上發生位移或者變形
translateY() 在y軸上發生位移或者變形
translate(x,y) 在x軸 ，y軸上發生位移或者變形 當只有壹個值的時候，只有x軸生效
2.scale 縮放
scaleX() 設置在x軸上發生縮放
scaleY() 設置在y軸上發生縮放
scale(x,y) 設置在x軸，y軸上發生縮放 當只有壹個值的時候，x，y軸都發生縮放可以設置負數 使用場景：設置小於12px的字體
3.rotate 旋轉 2d旋轉 設置元素在2d平面旋轉（z軸），正數按順時針，負數按逆時針
rotateX（）設置沿x軸旋轉
rotateY () 設置沿y軸旋轉
4.skew 傾斜
skewX 繞x軸發生傾斜
skewY 繞y軸發生傾斜
skew(x,y) 繞x,y軸發生的傾斜 x軸和y軸和我們理解的相反，常用於平行四邊形圖案
三、transform-origin: 設置旋轉元素的基點位置
transform-origin是變形原點，也就是該元素圍繞著那個點變形或旋轉，該屬性只有在設置了transform屬性的時候起作用；
因為我們元素默認基點就是其中心位置，換句話說我們沒有使用transform-origin改變元素基點位置的情況下，transform進行的rotate,translate,scale,skew,matrix等操作都是以元素自己中心位置進行變化的。
但有時候我們需要在不同的位置對元素進行這些操作，那麽我們就可以使用transform-origin來對元素進行基點位置改變，使元素基點不在是中心位置，以達到妳需要的基點位置。
下面我們主要來看看其使用規則：
transform-origin(X,Y):用來設置元素的運動的基點（參照點）。默認點是元素的中心點。其中X和Y的值可以是百分值,em,px，其中X也可以是字符參數值left,center,right；Y和X壹樣除了百分值外還可以設置字符值top,center,bottom 。
語法：-moz-transform-origin: [ | | left | center | right ][ | | top | center | bottom ] ?
transform-origin接受兩個參數，它們可以是百分比，em，px等具體的值，也可以是left,center,right，或者 top,center,bottom等描述性參數 ;
top left | left top 等價於 0 0；
top | top center | center top 等價於 50% 0
right top | top right 等價於 100% 0
left | left center | center left 等價於 0 50%
center | center center 等價於 50% 50%（默認值）
right | right center | center right 等價於 100% 50%
bottom left | left bottom 等價於 0 100%
bottom | bottom center | center bottom 等價於 50% 100%
bottom right | right bottom 等價於 100% 100%