概念
Transform字面意思就是變形，改變的意思蒋歌，該元素應用于2D和3D轉換，該屬性允許我們i元素進行旋轉委煤、縮放奋姿、移動和傾斜。在css3中transform主要包括以下幾種：
旋轉rotate素标、扭曲skew称诗、縮放scale和移動translate以及矩陣變形matrix。
語法
transform: rotate | scale | skew | translate | matrix;
- 注意：表示一個或者多個函數(shù)變換的時候是以空格分開而不是逗號头遭。
transform屬性實現(xiàn)了一些可用SVG實現(xiàn)的同樣功能寓免，它可用于內(nèi)聯(lián)(inline)函數(shù)和塊級(block)元素，它允許我們旋轉计维，縮放和移動元素袜香。他有幾個屬性值參數(shù)：rotate;translate;scale;skew;matrix。
旋轉rotate
旋轉 rotate
通過指定的角度參數(shù)對原元素指定一個2D 旋轉和3D旋轉鲫惶，需先有transform-origin屬性的定義蜈首。transform-origin定義的是旋轉的基點，其中angle是指旋轉角度欠母，如果設置的值為正數(shù)表示順時針旋轉欢策，如果設置的值為負數(shù)，則表示逆時針旋轉赏淌。
rotate():2D旋轉
transform: rotate(45deg);
rotateX():沿著X軸3D旋轉
transform: rotateX(45deg);
rotateY():沿著Y軸3D旋轉
transform: rotateY(45deg);
rotateZ():沿著Z軸3D旋轉
transform: rotateZ(45);
rotate3d(x,y,z,angle):3D旋轉踩寇，接受四個參數(shù)，x,y,z介于0-1之間六水，angle是旋轉的度數(shù)俺孙。元素圍繞著xyz在空間中確定的唯一坐標點和原點之間的連線旋轉指定的角度辣卒，這就是rotate3D。
transform: rotate3D(1,1,1,45deg);
移動 translate
移動translate我們分為三種情況：translate(x,y)水平方向和垂直方向同時移動（也就是X軸和Y軸同時移動）睛榄；translateX(x)僅水平方向移動（X軸移動）荣茫；translateY(Y)僅垂直方向移動（Y軸移動），具體使用方法如下：
translateX(x) 场靴， 沿 X 軸位移
translateX(x) 计露， //沿 X 軸位移translateY(y), 沿Y移動
translateY(y) //沿y移動ranslateZ(z) ， 沿 Z 軸位移憎乙，需要配合perspective屬性一起使用
transform: translateZ(20px);
- translate(x, y) ， 沿 X Y 軸位移
transform: translate(20px,30px);
通過矢量(x,y)指定一個2D translation叉趣，x 是第一個過渡值參數(shù)泞边，y 是第二個過渡值參數(shù)選項。如果未被提供疗杉，則y以 0 作為其值阵谚。也就是translate(x,y),它表示對象進行平移，按照設定的x,y參數(shù)值,當值為負數(shù)時烟具，反方向移動物體梢什，其基點默認為元素中心點，也可以根據(jù)transform-origin進行改變基點朝聋。如transform:translate(100px,20px):
- translate3d(x, y, z) 嗡午， 沿 X Y Z 軸位移
transform: translate(20px, 20px, 20px);
縮放 scale
縮放scale和移動translate是極其相似，他也具有三種情況：scale(x,y)使元素水平方向和垂直方向同時縮放（也就是X軸和Y軸同時縮放）冀痕；scaleX(x)元素僅水平方向縮放（X軸縮放）荔睹；scaleY(y)元素僅垂直方向縮放（Y軸縮放），但它們具有相同的縮放中心點和基數(shù)言蛇，其中心點就是元素的中心位置僻他，縮放基數(shù)為1，如果其值大于1元素就放大腊尚，反之其值小于1吨拗，元素縮小。下面我們具體來看看這三種情況具體使用方法：
- scale([, ])：提供執(zhí)行[sx,sy]縮放矢量的兩個參數(shù)指定一個2D scale（2D縮放）婿斥。如果第二個參數(shù)未提供劝篷，則取與第一個參數(shù)一樣的值。scale(X,Y)是用于對元素進行縮放民宿，可以通過transform-origin對元素的基點進行設置携龟，同樣基點在元素中心位置；基中X表示水平方向縮放的倍數(shù)勘高，Y表示垂直方向的縮放倍數(shù)峡蟋，而Y是一個可選參數(shù)坟桅，如果沒有設置Y值，則表示X蕊蝗，Y兩個方向的縮放倍數(shù)是一樣的仅乓。并以X為準。如：
transform:scale(2,1.5):
- scaleX() ： 使用 [sx,1] 縮放矢量執(zhí)行縮放操作蓬戚，sx為所需參數(shù)夸楣。scaleX表示元素只在X軸(水平方向)縮放元素，他的默認值是(1,1)子漩，其基點一樣是在元素的中心位置豫喧，我們同樣是通過transform-origin來改變元素的基點。如：
transform:scaleX(2):
- scaleY() ： 使用 [1,sy] 縮放矢量執(zhí)行縮放操作幢泼，sy為所需參數(shù)紧显。scaleY表示元素只在Y軸（垂直方向）縮放元素，其基點同樣是在元素中心位置缕棵，可以通過transform-origin來改變元素的基點孵班。如:
transform:scaleY(2):
扭曲 skew
扭曲skew和translate、scale一樣同樣具有三種情況：skew(x,y)使元素在水平和垂直方向同時扭曲（X軸和Y軸同時按一定的角度值進行扭曲變形）招驴；skewX(x)僅使元素在水平方向扭曲變形（X軸扭曲變形）篙程；skewY(y)僅使元素在垂直方向扭曲變形（Y軸扭曲變形），具體使用如下:
- skewX(angle) - 沿 X 軸的 2D 傾斜
transform: skewX(45deg);
- skewY(angle) - 沿 Y 軸的 2D 傾斜
ransform: skewY(45deg);
- skew(angle-x, angle-y) - 沿 X Y 軸的 2D 傾斜
transform: skewY(45deg, 45deg);
X軸Y軸上的skew transformation（斜切變換）别厘。第一個參數(shù)對應X軸虱饿，第二個參數(shù)對應Y軸。如果第二個參數(shù)未提供触趴，則值為0郭厌，也就是Y軸方向上無斜切。skew是用來對元素進行扭曲變行雕蔽，第一個參數(shù)是水平方向扭曲角度折柠，第二個參數(shù)是垂直方向扭曲角度。其中第二個參數(shù)是可選參數(shù)批狐，如果沒有設置第二個參數(shù)扇售，那么Y軸為0deg。同樣是以元素中心為基點嚣艇，我們也可以通過transform-origin來改變元素的基點位置承冰。如：transform:skew(30deg,10deg):
前面我們也提到過transform-origin它的主要作用是讓我們在進行transform動作之前可以改變元素的之前的位置。因為元素的默認中心點就是其中心位置食零。
