形变特性
在CSS中对于形变的转换主要分为2D和3D两种形式，其中包含的形变特性有：
-
translate：位置移动 -
scale：缩放 -
rotate：旋转 -
skew：斜切 -
perspective：透视
其中perspective这个是3D特性，前面几个特性，可以玩3D，比如translate要来作为3D特性的话，就有：
translate3d(x,y,z)translateXtranslateYtranslateZ
除了perspective这个属性外，其他都是transform这个属性其中一个属性值
2D形变
2D图形内容只有水平的X轴向和垂直Y轴向，在2D形变中，需要用到的CSS属性有：
-
transform：向元素应用2D或者3D形变特性 -
transform-origin：改变被转换元素的中心原点的位置
transform-origin属性
元素的中心原点默认是在元素的中心的位置，也就是center center属性值，比如改变中心点为左上角
transform-origin: top left;
transform属性
transform是一个复合属性，包含各种形变的值，常见的有translate、scale、rotate、skew这么四个。这些属性可以同时存在，也可以只写其中几个，属性之间用空格隔开。
-webkit-transform: translateX(50px) scale(2) rotate(180deg) skewX(30deg);
transform: translateX(50px) scale(2) rotate(180deg) skewX(30deg);
个别浏览器设备还是需要加上浏览器内核前缀
当不需要使用transform属性时，可以使用transform:none;来取消形变样式。
在transform中还有一个属性值：matrix(n,n,n,n,n,n)矩阵，需要把前面四种形变方式进行转换。如果是3D形变的话，就要用matrix3d(n,...,n)16个值得4*4矩阵
translate类型
translate主要的作用是位置偏移，偏移的单位可以是px或者是%之类的单位值，写法有：
-
translate(x,y)，沿X和Y轴移动 -
translateX(n)，沿X轴移动 -
translateY(n)，沿Y轴移动
scale类型
早之前在CSS中我们可以通过zoom来对元素进行缩放，但这个缩放只有整体的缩放，而不会像scale这个特性一样细致。
-
scale(n)：整体比例缩放 -
scaleX(n)：根据X轴进行缩放 -
scaleY(n)：根据Y轴进行缩放
rotate和skew类型
rotate和skew单位值都是度(deg)
-
rotate(angle)：以中心远点为基准，顺时针或者逆时针方向旋转（正数顺时针） -
rotateX(angle)：以X轴的方向同时旋转 -
rotateY(angle)：以Y轴的方向同时旋转 -
skew(X-angle,Y-angle)：以X轴和Y轴方向同时倾斜 -
skewX(angle)：以X轴方向同时倾斜 -
skewY(angle)：以Y轴方向同时倾斜
3D形变
3D效果中有一个关键的点就是透视，transform-style:preserve-3d;来保留3D的位置，在transform-style属性中还有一个flat属性值，作用是不保留3D的位置
transform属性
在transform3D形变中，前面的几个属性拥有3D特性的有以下几个：
translate3d(x,y,z)translateZ(z)scale3d(x,y,z)scaleZ(z)rotate3d(x,y,z,angle)rotateZ(angle)
skew斜切不存在3D形变，其他几个都增加了Z轴变化的一个值，如果要把3个值写在一起，就变成...3d()这样的写法
rotate类型
这里的x,y,z代表的是一个方向矢量，如果这3个都为0时，最后一个角度值将不起作用。如：rotate3d(1,0,0,45deg)等价于rotateX(45deg)
translate类型
translate3d(x,y,z)translateZ(z)
因为Z轴是一个3D立体的视角，还需要添加一个perspective属性，然后才会有效果。
scale类型
scale3d(x,y,z)scaleX(x)scaleY(y)scaleZ(z)
perspective透视属性
透视属性需要写在父级元素上，影响子级元素的变化，而不会影响自身
当perspective的属性值越小时，透视的空间就越小，而数字过大，则会感觉似乎没有透视效果，接近于平面化
