2D转换属性

2D转换
定义：2D变换，是在一个平面对元素进行的操作。
可以对元素进行水平或者垂直位移、旋转或者拉伸。
确定坐标系
默认状态下，x轴是水平的，向右为正。
默认状态下，y轴是垂直的，向下为正。
----------------------------------------------------------------------------------------
变形属性：transform
属性值：
transform：none;默认值
transform：translate（）；移动  平移  单位是px
transform：rotate（）；旋转  单位是deg   deg度数
transform：scale（）；缩放  没有单位  默认值是1
transform：skew（）；倾斜   单位是deg
transform：matrix（）；矩阵 
transform：perspective（）；景深   视距  单位是px
-----------------------------------------------------------------------------------------
平移属性
transform ：none； 说明：定义不进行转换。
transform ：translate(200px)；平移，默认是X轴移动，可以单位是%，这个%是自己的，不是父元素的
transform ：translate(200px)； 默认是按照X轴移动
transform ：translateX(200px)； 根据X轴给定的参数，从当前元素位置移动。
transform ：translateY(200px)； 根据Y轴给定的参数，从当前元素位置移动。
transform ：translate(10px,20px)； 定义 2D 平移移动。
--------------------------------------------------------------------------------------------------
旋转属性
transform ：rotate(30deg)； 默认是按照Z轴旋转。
transform ：rotateX(30deg)；根据X轴给定的参数，从当前元素位置旋转。
transform ：rotateY(30deg)； 根据Y轴给定的参数，从当前元素位置旋转。
-----------------------------------------------------------------------------------------------------------
缩放属性
transform ：scale(0.2)； 默认是X和Y同时缩放。
ransform  ：scaleX(2)； 通过设置 X 轴的值来定义缩放转换
transform ：scaleY(3)； 通过设置 Y 轴的值来定义缩放转换。
transform ：scale(2,5)； 定义 2D 缩放。
transform ：scaleX(2)   scaleY(3) ；该元素增加或减少的大小，
取决于宽度（X轴）和高度（Y轴）的参数，可以取负值。
只不过取负值时，会先让元素进行翻转（顺时针180deg），
然后在进行缩放。
-------------------------------------------------------------------------------------------------------
倾斜属性
transform ：skew(30deg)； 默认是X轴倾斜。
transform ：skewX(30deg)；通过设置 X 轴的值来定义倾斜转换
transform ：skewY(30deg)；通过设置 Y 轴的值来定义倾斜转换
transform ：skew(30deg,130deg)； 定义 2D 倾斜
-----------------------------------------------------------------------------------------------------
transform-origin改变元素基点的位置  属性值可加left right.....
主要作用：让我们在进行transform动作之前可以改变元素的基点位置。
1.transform-origin(X,Y):用来设置元素的运动的基点（参照点）。
2.transform-origin(X，Y，Z)；其中的Z轴的设置，只能是数值。
------------------------------------------------------------------------------------------------------