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