概念
Transform字面意思就是变形，改变的意思，该元素应用于2D和3D转换，该属性允许我们i元素进行旋转、缩放、移动和倾斜。在css3中transform主要包括以下几种：
旋转rotate、扭曲skew、缩放scale和移动translate以及矩阵变形matrix。
语法
transform: rotate | scale | skew | translate | matrix;
- 注意：表示一个或者多个函数变换的时候是以空格分开而不是逗号。
transform属性实现了一些可用SVG实现的同样功能，它可用于内联(inline)函数和块级(block)元素，它允许我们旋转，缩放和移动元素。他有几个属性值参数：rotate;translate;scale;skew;matrix。
旋转rotate
旋转 rotate
通过指定的角度参数对原元素指定一个2D 旋转和3D旋转，需先有transform-origin属性的定义。transform-origin定义的是旋转的基点，其中angle是指旋转角度，如果设置的值为正数表示顺时针旋转，如果设置的值为负数，则表示逆时针旋转。
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旋转，接受四个参数，x,y,z介于0-1之间，angle是旋转的度数。元素围绕着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 是第一个过渡值参数，y 是第二个过渡值参数选项。如果未被提供，则y以 0 作为其值。也就是translate(x,y),它表示对象进行平移，按照设定的x,y参数值,当值为负数时，反方向移动物体，其基点默认为元素中心点，也可以根据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轴缩放），但它们具有相同的缩放中心点和基数，其中心点就是元素的中心位置，缩放基数为1，如果其值大于1元素就放大，反之其值小于1，元素缩小。下面我们具体来看看这三种情况具体使用方法：
- scale([, ])：提供执行[sx,sy]缩放矢量的两个参数指定一个2D scale（2D缩放）。如果第二个参数未提供，则取与第一个参数一样的值。scale(X,Y)是用于对元素进行缩放，可以通过transform-origin对元素的基点进行设置，同样基点在元素中心位置；基中X表示水平方向缩放的倍数，Y表示垂直方向的缩放倍数，而Y是一个可选参数，如果没有设置Y值，则表示X，Y两个方向的缩放倍数是一样的。并以X为准。如：
transform:scale(2,1.5):
- scaleX() ： 使用 [sx,1] 缩放矢量执行缩放操作，sx为所需参数。scaleX表示元素只在X轴(水平方向)缩放元素，他的默认值是(1,1)，其基点一样是在元素的中心位置，我们同样是通过transform-origin来改变元素的基点。如：
transform:scaleX(2):
- scaleY() ： 使用 [1,sy] 缩放矢量执行缩放操作，sy为所需参数。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（斜切变换）。第一个参数对应X轴，第二个参数对应Y轴。如果第二个参数未提供，则值为0，也就是Y轴方向上无斜切。skew是用来对元素进行扭曲变行，第一个参数是水平方向扭曲角度，第二个参数是垂直方向扭曲角度。其中第二个参数是可选参数，如果没有设置第二个参数，那么Y轴为0deg。同样是以元素中心为基点，我们也可以通过transform-origin来改变元素的基点位置。如：transform:skew(30deg,10deg):
前面我们也提到过transform-origin它的主要作用是让我们在进行transform动作之前可以改变元素的之前的位置。因为元素的默认中心点就是其中心位置。
