transform
transform 属性允许你旋转，缩放，倾斜或平移给定元素。通过修改 CSS 视觉格式化模型的坐标空间来实现。
根据经验，内联盒子（
display: inline）不生效。
该属性可以接受一个或多个 CSS 变换函数。我们按效果分成了 2D 和 3D，一一介绍。
transform-origin
transform-origin，更改一个元素变形的原点。默认值，center。
- 一个值：
必须是
<length>，<percentage>，或left,center,right,top,bottom关键字中的一个。 - 两个值：
其中一个必须是
<length>，<percentage>，或left,center,right关键字中的一个。 另一个必须是<length>，<percentage>，或top,center,bottom关键字中的一个。 - 三个值：
前两个值和只有两个值时的用法相同。
第三个值必须是
<length>。它始终代表Z轴偏移量。
2D 转换
translate() 平移
translate()，该函数在水平和/或垂直方向上重新定位元素。它的参数定义了元素在每个方向上的偏移量。
语法：
translate(<length-percentage> , <length-percentage>?)
参数的类型是 <length-percentage>，如果是百分比类型，则横坐标参数基于自身的宽，纵坐标参数基于自身的高。
- 一个参数：代表横坐标，纵坐标默认为 0。
- 两个参数：代表横坐标和纵坐标。
transform: translate(100px, 200px);
translateX()
translateX()，表示在二维平面上水平方向移动元素。translateX(tx) 等同于 translate(tx) 或者 translate(tx,0)。
transform: translateX(200px);
translateY()
translateY()，表示在二维平面上垂直方向移动元素。translateY(ty) 等同于 translate(0,ty)。
transform: translateY(200px);
rotate() 旋转
rotate()，该函数定义了一种将元素围绕一个定点（由 transform-origin 属性指定，默认为元素的中心）旋转而不变形的转换。
语法：
rotate(a)
- 若角度（a）为正，则顺时针方向旋转
- 若角度（a）为负，则逆时针方向旋转
- 旋转 180 度，称为点反演
transform: rotate(45deg);
scale() 缩放
scale()，用于在二维平面上修改元素的大小（放大或缩小）。
语法：
scale(sx, sy?)
sx，表示缩放向量的横坐标。sy，表示缩放向量的纵坐标。如果未设置，则默认值被设置为sx，元素在保持原有比例缩放。
坐标值的大小：
[-1,1]：缩小(-∞,-1),(1,∞)：放大- 负数：进行像素点反射之后，再进行大小的修改。
transform: scale(2, 0.5);
scaleX()
scaleX()，只对横坐标进行缩放，scaleX(sx) 等同于 scale(sx, 1)，是一个缩写。
transform: scaleX(2);
scaleY()
scaleY()，只对纵坐标进行缩放，scaleY(sx) 等同于 scale(1, sy)，是一个缩写。
transform: scaleY(2);
skew() 倾斜
skew()，该函数定义了一个元素在二维平面上的 倾斜转换。
这种转换是一种剪切映射(横切)，它在水平和垂直方向上将单元内的每个点扭曲一定的角度。每个点的坐标根据指定的角度以及到原点的距离，进行成比例的值调整；因此，一个点离原点越远，其增加的值就越大。
语法：
skew(ax, ay?)
ax，沿横坐标扭曲元素的角度。ay，沿纵坐标扭曲元素的角度。如果未定义，则其默认值为 0，导致纯水平倾斜。
transform: skew(40deg, 30deg);
skewX()
skewX()，二维平面上水平方向的倾斜。skewX(a) 相当于 skew(a)。
transform: skewX(40deg);
skewY()
skewY()，二维平面上垂直方向的倾斜。skewY(a) 相当于 skew(1,a)
transform: skewY(40deg);
matrix()
matrix() 指定了一个由指定的 6 个值组成的 2D 变换矩阵。关于转换的最终参数是通过这个矩阵计算出来的。
语法：
matrix(a, b, c, d, tx, ty)
经过计算我们会发现，这六个值可以对应上：
matrix( scaleX(), skewY(), skewX(), scaleY(), translateX(), translateY() )
3D 转换
rotate 旋转
rotateX()
rotateX()，函数定义了一个转换，它可以让一个元素围绕**横坐标(水平轴)**旋转，而不会对其进行变形。
- 如果为正，则顺时针方向移动；
- 如果为负，则逆时针方向移动。
transform: rotateX(45deg);
rotateY()
rotateY()，函数定义了一个转换，它可以让一个元素围绕**纵坐标(垂直轴)**旋转，而不会对其进行变形。
transform: rotateY(45deg);
rotateZ()
rotateZ() 让一个元素围绕横 Z 轴旋转，而不会对其进行变形，没错，rotateZ(a) 就相当于 rotate(a)。
rotate3d()
rotate3d() 函数的旋转规则是：以坐标原点（根据 transform-origin 设定，默认为 （0,0,0） ）为起始点，以 （x,y,z） 为终点的向量为轴，根据左手定则，选择 angle 角度。
语法：
rotate3d(x,y,z,angle)
以 (0,0,0) 到 (1,1,1)的向量为轴，旋转 45 度：
transform: rotate3d(1, 1, 1, 45deg);
translateZ()
translateZ()，表示在三维的 Z 轴方向移动元素。translateZ(tz) 等同于 translate3d(0,0,tz)。
scaleZ()
scaleZ()，只对 Z 坐标进行缩放，scaleZ(sz) 等同于 scale3d(1, 1,sz)，是一个缩写。
对比一下缩放前后的效果，感受 Z 轴的拉伸：
transform: scaleZ(1);
transform: scaleZ(1.4);
perspective 透视
perspective()
perspective 指定了观察者与 z=0 平面的距离，使具有三维位置变换的元素产生透视效果。 z>0 的三维元素比正常大，而 z<0 时则比正常小。
none没有应用perspective样式时的默认值.<length><length>指定观察者距离z=0平面的距离，为元素及其内容应用透视变换。当值为 0 或负值时，无透视变换。
perspective-origin
perspective-origin 指定了观察者的位置，
