概念Transform字面意思是变形、变化。此元素应用于2D和3D转换。该属性允许我们旋转、缩放、移动和倾斜i元素。在css3中，transform主要包括以下几种：旋转rotate、扭曲skew、缩放scale和movingtranslate、矩阵变形matrix。语法变换：rotate|规模|歪斜|翻译|矩阵;注意：当一个或多个函数被转换时，它们之间用空格而不是逗号分隔。transform属性实现了一些可以用SVG实现的相同功能，它可以与内联函??数和块级（block）元素一起使用，它允许我们旋转、缩放和移动元素。他有几个属性值参数：rotate；翻译;规模;倾斜;矩阵。RotaterotateRotate通过指定的angle参数对原元素进行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旋转：rotateZ(45);rotate3d(x,y,z,angle)：3D旋转，接受四个参数，x,y,z在0-1之间，angle是旋转的度数。该元素围绕空间中xyz确定的唯一坐标点与原点之间的连线旋转指定角度，即rotate3D。变换：rotate3D(1,1,1,45deg);movetranslatemovetranslate我们分为三种情况：translate(x,y)水平方向和垂直方向同时移动（即X轴和Y轴同时移动）；translateX(x)只在水平方向移动（X轴移动）；translateY(Y)只在垂直方向移动（Y轴移动），具体使用方法如下：translateX(x),沿X轴位移translateX(x),沿X轴位移translateY(y),movealongYtranslateY(y)//MoveranslateZ(z)alongy,沿Z轴移动，需要和perspective属性一起使用transform:translateZ(20px);translate(x,y),alongtheX和Y轴位移变换：translate(20px,30px);通过向量(x,y)指定一个二维平移，x是第一个过渡值参数，y是第二个过渡值参数选项。如果未提供，则y取0作为其值。即translate(x,y)，表示物体平移，根据设定的x,y参数值，当值为负时，物体向反方向移动，其基点为中心点元素的默认，或者根据transform-origin来改变基点。如transform:translate(100px,20px):translate3d(x,y,z)，沿XYZ轴的位移transform:translate(20px,20px,20px);zoomingscale和movingtranslate很相似，也有三种情况：scale(x,y)同时水平和垂直缩放元素（即X轴和Y轴同时缩放）;scaleX(x)元素仅水平缩放（X轴缩放）；scaleY(y)元素仅垂直缩放Scale（Y轴缩放），但它们具有相同的缩放中心点和基点。中心点是元素的中心位置。缩放基数为1。如果该值大于1，则元素将被放大。否则，如果该值小于1，则元素将缩小。我们来看看这三种情况的具体用法：scale([,]):提供两个参数用于对向量进行[sx,sy]缩放，指定一个2D缩放(2Dscaling)。如果没有提供第二个参数，则取与第一个参数相同的值。scale(X,Y)用于对元素进行缩放，可以通过transform-origin设置元素的基点，基点也位于元素的中心；base中的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):twistingskewtwistingskew和translate和scale一样有三种情况：skew(x,y)使元素在水平和垂直方向同时扭曲（X轴和Y轴在一定角度同时为畸变值）；skewX(x)只在水平方向扭曲元素（X轴扭曲）；skewY(y)只在垂直方向扭曲元素（Y轴扭曲），具体使用如下：skewX(angle)-2DskewalongXaxistransform:skewX(45deg);skewY(angle)-沿Y轴变换的2D倾斜：skewY(45deg)；skew(angle-x,angle-y)-沿XY轴的2D倾斜变换：skewY(45deg,45deg);X轴和Y轴上的倾斜变换（倾斜变换）。第一个参数对应X轴，第二个参数对应Y轴。如果不提供第二个参数，则值为0，即Y轴方向没有倒角。skew用于扭曲和改变元素的线条。第一个参数是水平方向的扭曲角度，第二个参数是垂直方向的扭曲角度。第二个参数为可选参数，如果不设置第二个参数，则Y轴为0deg。同样以元素的中心为基点，我们也可以通过transform-origin改变元素的基点位置。如：transform:skew(30deg,10deg)：我们前面也提到了transform-origin主要是用来在执行transform动作之前改变元素之前的位置。因为元素的默认中心点是它的中心位置。
