*变形属性：transform
transform翻译成汉语具有"变换"或者"改变"的意思。
通过此属性具有非常强大的功能，比如可以实现元素的位移、拉伸或者旋转等效果
最能体现transform 属性强大实力的是实现元素的3D变换效果
2D
2D变换，是在一个平面对元素进行的操作。
可以对元素进行水平或者垂直位移、旋转或者拉伸
1.变形属性：transform的所有属性值
1、transform：none;默认值
2、transform：translate（）；移动 平移 单位是px
3、transform：rotate（）；旋转 单位是deg deg度数
4、transform：scale（）；缩放 没有单位 默认值是1
5、transform：skew（）；倾斜 单位是deg
7、transform：perspective（）；景深 视距 单位是px
2.transform转换 平移属性
（1）transform ：none； 定义不进行转换。
（2）transform ：translate(200px)； 平移，默认是X轴移动，可以单位是%，这个%是自己的，不是父元素的
（3）transform：translate(200px)； 默认是按照X轴移动
（4）transfor ：translateX(200px)； 根据X轴给定的参数，从当前元素位置移动。
（5）transfor ：translateY(200px)； 根据Y轴给定的参数，从当前元素位置移动。
（6）transform ：translate(10px,20px)； 定义 2D 平移移动。
（6）transform ：translateX(200px) translateY(200px) ； 连写
3.transform转换 角度属性
（1）transform ：rotate(30deg)； 旋转 单位deg 默认是Z轴旋转
（2）transform ：rotate(30deg)； 默认是按照Z轴旋转。
（3）transform ：rotateX(30deg)； 根据X轴给定的参数，从当前元素位置旋转
（4）transform ：rotateY(30deg)； 根据Y轴给定的参数，从当前元素位置旋转。
（5）transform ：rotateX(30deg) rotateY(30deg) ；不能加逗号合在一起写。
4.transform转换 缩放属性
（1）transform ：scale(2)； X和Y同时缩放 默认值是1
（2） transform ：scale(2)； 默认是X和Y同时缩放。
（3）transform ：scaleX(2)； 通过设置 X 轴的值来定义缩放转换
（4） transform ：scaleY(3)； 通过设置 Y 轴的值来定义缩放转换。
（5） transform ：scale(2,5)； 定义 2D 缩放。
（6） transform ：scaleX(2) scaleY(3) ；元素增加或减少的大小，取决于宽度（X轴）和高度（Y轴）的参数，可以取负值。只不过取负值时，会先让元素进行翻转（顺时针180deg），然后在进行缩放。
5.transform转换 倾斜属性
（1 ）transform ：skew(30deg)； 倾斜 单位deg
（2）transform:skew(30deg)； 默认是X轴倾斜。
（3） transform ：skewX(30deg)； 通过设置X 轴的值来定义倾斜转换
（4） transform ：skewY(30deg) 通过设置Y 轴的值来定义倾斜转换
（5） transform ：skew(30deg,130deg)； 定义 2D 倾斜
（6） transform ：skewX(30deg) skewY(130deg) ；
6.改变元素基点的位置transform-origin
他的主要作用就是让我们在进行transform动作之前可以改变元素的基点位置。
A、transform-origin(X,Y):用来设置元素的运动的基点（参照点）。默认点是元素的中心点。其中X和Y的值可以是百分值,em,px，其中X也可以是字符参数值left,center,right；Y和X一样除了百分值外还可以设置字符值top,center,bottom。
B、transform-origin(X，Y，Z)；其中的Z轴的设置，只能是数值。
7.确定坐标系
对上面坐标系简单分析如下：
（1）.默认状态下，x轴是水平的，向右为正。
（2）.默认状态下，y轴是垂直的，向下为正，这与传统的数学坐标系不同。
