transform 改變
rotate 旋轉
translate 位移
scale 縮放
skew 斜切變形
記得兼容性：
-webkit-
-moz-
-ms-
-o-
transform: rotate(Xdeg,Ydeg);
deg 表示角度 X軸正半軸為0deg，順時針旋轉值越來越大。
transform-origin( X ,Y ); 設置對象旋轉的中心點，如果沒設置該值，默認transform-origin(50%,50%);
transform-origin(100px,200px); 設定旋轉的中心點為，水平位移100px，垂直位移200px;
transform: rotate(45deg); 對象 以水平位移100px,垂直位移200px 為中心點旋轉45度。
默認旋轉中心為對象的正中心，即：圖片長寬的50%。transform-origin:50% 50%;
rotate指定對象的2D旋轉，指定對象指的是當前對象，也就是原元素，雖然子元素也會跟着動，
但是子元素並沒有發生相對旋轉，旋轉一定要有一個旋轉中心，所以需先有transform-origin屬性的定義來確定旋轉中心，
如果缺省，默認為transform-origin: 50% 50%。
transform:translate(X , Y); px,vh,vw,%,rem,em,cm,mm等相對單位，絕對單位都有效。
X 相對圖片左上角頂點，進行水平位移。
Y 相對圖片左上角頂點，進行垂直位移。
transform: translate(200px); === transform: translate(200px,0);
transform: translate(0,200px); 如果只讓Y軸垂直位移，那么X軸參數不能省略。
只寫一個參數那么默認X軸水平位移200px，Y軸不進行位移。
transform:translateX(x);
transform:translateY(x);
transform: scale( X , Y );
以對象的正中心為縮放中心，把對象進行縮放，這里是等比例縮放，對象不會變形，縮放對象包括圖片，div等等。
transform: scaleX( .5 ); 以對象的正中心為中心，水平縮放到寬度等於原來寬度的50%；
transform: scaleY( .5 ); 以對象的正中心為中心，垂直縮放到高度等於原來高度的50%；
transform: scale( .5 , .5 ); 以對象的正中心為中心，水平垂直縮放到原來寬高的50%；
transform: scale( .5 ); === transform: scale( .5 , .5 );
=================
transform: rotate(Xdeg,Ydeg);
deg 表示角度 X軸正半軸為0deg，順時針旋轉值越來越大。
transform-origin( X ,Y ); 設置對象旋轉的中心點，如果沒設置該值，默認transform-origin(50%,50%);
transform-origin(100px,200px); 設定旋轉的中心點為，水平位移100px，垂直位移200px;
transform: rotate(45deg); 對象 以水平位移100px,垂直位移200px 為中心點旋轉45度。
默認旋轉中心為對象的正中心，即：圖片長寬的50%。transform-origin:50% 50%;
rotate指定對象的2D旋轉，指定對象指的是當前對象，也就是原元素，雖然子元素也會跟着動，
但是子元素並沒有發生相對旋轉，旋轉一定要有一個旋轉中心，所以需先有transform-origin屬性的定義來確定旋轉中心，
如果缺省，默認為transform-origin: 50% 50%。
transform:translate(X , Y); px,vh,vw,%,rem,em,cm,mm等相對單位，絕對單位都有效。
X 相對圖片左上角頂點，進行水平位移。
Y 相對圖片左上角頂點，進行垂直位移。
transform: translate(200px); === transform: translate(200px,0);
transform: translate(0,200px); 如果只讓Y軸垂直位移，那么X軸參數不能省略。
只寫一個參數那么默認X軸水平位移200px，Y軸不進行位移。
兼容性問題：
-webkit-
-moz-
-ms-
-o-
----------------------------
transform:translateX(x);
transform:translateY(x);
transform: scale( X , Y );
以對象的正中心為縮放中心，把對象進行縮放，這里是等比例縮放，對象不會變形，縮放對象包括圖片，div等等。
transform: scaleX( .5 ); 以對象的正中心為中心，水平縮放到寬度等於原來寬度的50%；
transform: scaleY( .5 ); 以對象的正中心為中心，垂直縮放到高度等於原來高度的50%；
transform: scale( .5 , .5 ); 以對象的正中心為中心，水平垂直縮放到原來寬高的50%；
transform: scale( .5 ); === transform: scale( .5 , .5 );
實例1：
將一個width:1000px;height:500px;的元素縮放為width:300px;height:100px;，
scale縮放的參數是以1為基准的[sx,sy]縮放矢量參數，即寬度縮放為原元素的sx倍，高度縮放為原元素的sy倍。所以縮放的應該是transform: scale(300/1000, 100/500),但是scale()中不能用分數，所以正確答案是transform: scale(.3, .2)。
實例2：
原元素的寬高屬性為width:1000px;height:500px;，執行transform: scale(.5);之后的變化表述正確的是？
scale縮放的參數是以1為基准的[sx,sy]縮放矢量參數，即寬度縮放為原元素的sx倍，高度縮放為原元素的sy倍。當第二個參數省略的時候，默認寬度和高度的縮放比例都和第一個參數一樣，實現等比縮放。width:1000px和height:500px;執行transform: scale(.5);之后，width=1000px*.5=500px;height=500px*.5=250px
注意：
這里的縮放是針對元素對象本身，而不是其父元素。
===============================
transform: skewX( Xdeg );
已經定義對象div寬高如：width:300px; height:200px;
如上圖：transform: skewX( 30deg ); 可以理解為：
最重要的是：沒變形之前，在對象的幾何中心畫X,Y軸，skew是相對它們進行角度旋轉的。
對象以X正半軸為0deg，逆時針旋轉30deg，兩條寬度永遠都與X軸平行，除了角度達到最大90deg/-90deg時，變成一條看不見的線。
高度永遠為300px 。旋轉最大角度（變成一條看不見的線）為 90deg 或 -90deg 。正度數就在X正半軸，負度數就在X負半軸。
同理：
transform: skewY(20deg); 理解：
最重要的是：沒變形之前，在對象的幾何中心畫X,Y軸，skew是相對它們進行角度旋轉的。
對象以Y正半軸為0deg，順時針旋轉20deg（跟X軸相反）。且高度永遠跟Y軸平行，除了角度達到最大90deg/-90deg時，變成一條看不見的線。
寬度永遠為200px。旋轉最大角度（變成一條看不見的線）為 90deg 或 -90deg 。正度數就在Y正半軸，負度數就在Y負半軸。
transform: skew( 20deg ); === transform: skew(20deg , 0deg);
transform: skew( 0 , 20deg ); 表示對象的Y軸旋轉20度。
skew X軸，Y軸的取值范圍都是： 90deg ~ -90deg ;
X軸 以X正半軸為0deg，值逆時針越來越大。
Y軸 以Y正半軸為0deg，值順時針越來越大。
Xdeg + Ydeg = 90deg或-90deg 那么就變成看不到的一條直線。
使用元素審查，改變度數最好。
transform: skew(<angle> [, <angle>]);其中angle為傾斜角度，角度方向跟隨極坐標角度方向，逆時針為正方向，順時針為負方向。當只有一個參數的時候，第二個參數默認為0deg，因此transform: skew(45deg);為元素的水平方向逆時針傾斜45度，豎直方向傾斜0度
==========================
在transform: rotate3d(x, y, z, angle);中，第一個參數表示X軸，第二個參數表示Y軸，第三個參數表示Z軸，其中0為該方向不旋轉，大於0為正方向旋轉（順時針），小於0為負方向旋轉（逆時針），第四個參數表示旋轉的角度，參數不允許省略。
需要把一個寬度為1000像素和高度為250像素的元素縮放為寬度為500像素、高度為500像素
scale3d(sx,sy,sz)，sx為橫向縮放比例；sy為縱向縮放比例；sz為z軸縮放比例，參數不允許省略，無縮放比例為1，寬度1000px縮放為500px，寬度變成原來的一半，即1000*0.5=500px，高度250px變成500px，增加了一半，因此250*2=500px；z軸沒有縮放，參數不能省略，使用1表示無縮放。因此transform: scale3d(.5, 2, 1)正確。
