transform的含義是：改變，使…變形；轉換
在排版當中去合理的使用transform會使我們的排版看起來高大上那么一點。
接下來給大家介紹一下這個神奇的小東西都有什么屬性會有什么效果。
1.旋轉rotate
rotate：通過指定的角度參數對原元素指定一個效果。
如果設置的值為正數表示順時針旋轉，如果設置的值為負數，則表示逆時針旋轉。如：transform:rotate(30deg)；
2.移動translate
translate() 根據左(X軸)和頂部(Y軸)位置給定的參數，從當前元素位置移動。
如：transform:translate(100px,20px):
translateX
通過給定一個X方向上的數目指定一個translation。只向x軸進行移動元素，同樣其基點是元素中心點，也可以根據transform-origin改變基點位置
transform:translateX(100px):
translateY
通過給定Y方向的數目指定一個translation。只向Y軸進行移動，基點在元素心點，可以通過transform-origin改變基點位置。
transform:translateY(20px):
3.縮放scale
縮放scale和移動translate是有點相似的，也是有三種情況：下面我們具體來看看這三種情況具體使用方法：
注意：默認值是1，它的值放大是比1大，縮小比1小。
1、scale(x,y) 定義 2D 縮放轉換，改變元素的寬度和高度。
如：transform:scale(2,1.5);
2、scaleX(n) 定義 2D 縮放轉換，改變元素的寬度。
如：transform:scaleX(2):
3、scaleY(n) 定義 2D 縮放轉換，改變元素的高度。
如：transform:scaleY(2):
4.扭曲skew
1、skew(x-angle,y-angle) 定義 2D 傾斜轉換，沿着 X 和 Y 軸。
如：transform:skew(30deg,10deg);
image
2、skewX(angle) 定義 2D 傾斜轉換，沿着 X 軸。
如：transform:skewX(30deg);
3、skewY(angle) 定義 2D 傾斜轉換，沿着 Y 軸。
如：transform:skewY(10deg);
matrix(, , , , , ) ： 以一個含六值的(a,b,c,d,e,f)變換矩陣的形式指定一個2D變換，相當於直接應用一個[a b c d e f]變換矩陣。就是基於水平方向（X軸）和垂直方向（Y軸）重新定位元素,此屬性值使用涉及到數學中的矩陣。
改變元素基點 tranform-origin
改變元素基點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，這個看上去有點像我們background-position設置一樣；下面我列出他們相對應的寫法：
1、top left | left top 等價於 0 0 | 0% 0%
2、top | top center | center top 等價於 50% 0
3、right top | top right 等價於 100% 0
4、left | left center | center left 等價於 0 50% | 0% 50%
5、center | center center 等價於 50% 50%（默認值）
6、right | right center | center right 等價於 100% 50%
7、bottom left | left bottom 等價於 0 100% | 0% 100%
8、bottom | bottom center | center bottom 等價於 50% 100%
9、bottom right | right bottom 等價於 100% 100%
其中 left,center right是水平方向取值，對應的百分值為left=0%;center=50%;right=100%而top center bottom是垂直方向的取值，其中top=0%;center=50%;bottom=100%;如果只取一個值，表示垂直方向值不變，我們分別來看看以下幾個實例
(1)transform-origin:(left,top):
(2)transform-origin:right
(3)transform-origin(25%,75%)
