transform
用法:
1.移動 2.旋轉 3.縮放 4.傾斜 5.元素的基點 6.合寫
1.移動：translate
一個值：transform:translate(100px)
表示水平方向移動的位移，等同於translateX(100px)
translateX(x):沿 X 軸位移
translateY(y):沿 Y 軸位移
translateZ(z):沿 Z 軸位移
兩個值： transform:translate(100px,200px)
第一個表示水平方向移動的位移，第二個表示垂直方向移動的位移
translate(x,y) :沿 X Y 軸位移
三個值：translate3d(10px,20px,10px)
表示3D三個方向移動的位移，順序為X,Y,Z
2.旋轉：transform: rotate( n deg) (其中n為旋轉度數)
以角度(deg)為單位，正數是順時針旋轉，負數是逆時針旋轉
rotate():2D旋轉
rotateX():沿着X軸3D旋轉
rotateY():沿着Y軸3D旋轉
rotateZ():沿着Z軸3D旋轉.要在其父級配合transform-style: preserve-3d;使用
rotate3D(x,y,z,n deg): 3D旋轉，接受四個參數，x,y,z介於0-1之間，n是旋轉的度數。元素圍繞着xyz在空間中確定的唯一坐標點和原點之間的連線旋轉指定的角度，這就是rotate3D。
3 . 縮放：scale
一個值：transform: scale(1)
表示水平跟垂直方向同時放大1倍
兩個值：transform: scale(1,2)
第一個參數表示水平方向的縮放比例，第二個參數表示垂直方向的縮放比例,
等同於scaleX (1)和 scaleY(2)
三個值：scale3d(0.5,0.3,0.4)
表示3D三個方向縮放的比例，順序為X,Y,Z軸
數值為負時為縮小
4.傾斜：skew
一個值：transform:skew(10deg)
表示水平方向的傾斜角度，等同於skewX(10deg)
skewX:表示水平方向的傾斜角度
skewY：表示垂直方向的傾斜角度
兩個值：transform:skew(10deg,20deg)
第一個參數表示水平方向的傾斜角度，第二個參數表示垂直方向的傾斜角度
5.元素的基點：transform-origin: 10px 20px
值得注意的是:在進行以上的變形操作時，默認都是以元素的中心為基點.
要想改變基點則可以使用transform-origin屬性
有兩個參數：第一個表示距離元素左上角水平方向的距離，第二個表示距離元素左上角垂直方向的距離。
第一個參數可以設置為left、center、right，第二個參數可以設置為top、center、bottom。
6.合寫: transform : rotate(45deg) scale(1) skew(40deg,30deg) translate(100px 200px)