CSS3 2D转换

变形属性
    transform
        transform翻译成汉语具有"变换"或者"改变"的意思。
通过此属性具有非常强大的功能，比如可以实现元素的位移、拉伸或者旋转等效果
最能体现transform 属性强大实力的是实现元素的3D变换效果
    2D
        2D变换，是在一个平面对元素进行的操作。
可以对元素进行水平或者垂直位移、旋转或者拉伸
    变形属性：transform的所有属性值
        1、transform：none;默认值
2、transform：translate（）；移动  平移  单位是px
3、transform：rotate（）；旋转  单位是deg   deg度数
4、transform：scale（）；缩放  没有单位  默认值是1
5、transform：skew（）；倾斜   单位是deg
6、transform：matrix（）；矩阵  
7、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 ：translateX(200px)   translateY(200px) ；
        旋转
            transform ：rotate(30deg)；旋转 单位deg  默认是Z轴旋转
            transform ：rotate(30deg)；
                默认是按照Z轴旋转。
            transform ：rotateX(30deg)；
                根据X轴给定的参数，从当前元素位置旋转
            transform ：rotateY(30deg)；
                根据Y轴给定的参数，从当前元素位置旋转。
            transform ：rotateX(30deg)   rotateY(30deg)  ；
        缩放
            transform ：scale(2)；X和Y同时缩放 默认值是1 
            transform ：scale(2)；
                默认是X和Y同时缩放。
            transform ：scaleX(2)；
                通过设置 X 轴的值来定义缩放转换
            transform ：scaleY(3)；
                通过设置 Y 轴的值来定义缩放转换。
            transform ：scale(2,5)；
                定义 2D 缩放。
            transform ：scaleX(2)   scaleY(3) ；
                该元素增加或减少的大小，取决于宽度（X轴）和高度（Y轴）的参数，可以取负值。只不过取负值时，会先让元素进行翻转（顺时针180deg），然后在进行缩放
        倾斜
            transform ：skew(30deg)；倾斜 单位deg
            transform:skew(30deg)；
                默认是X轴倾斜。
            transform ：skewX(30deg)；
                通过设置 X 轴的值来定义倾斜转换
            transform ：skewY(30deg)；
                通过设置 Y 轴的值来定义倾斜转换
            transform ：skew(30deg,130deg)；
                定义 2D 倾斜
            transform ：skewX(30deg)  skewY(130deg)  ；
        矩阵
            transform ：matrix()；矩阵
            transform ：matrix(n,n,n,n,n,n)；
                定义 2D 转换，使用六个值的矩阵。
        景深  视距 
            transform ：perspective()；景深  视距 给到元素本身上
            transform ：perspective(200px)；
                景深，用来设置用户的眼睛距离元素的距离，数值越大
表示距离越远，看到元素的变化就不明显。不能给负值
    确定坐标系
        （1）.默认状态下，x轴是水平的，向右为正。
（2）.默认状态下，y轴是垂直的，向下为正，这与传统的数学坐标系不同。

改变元素基点的位置
    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轴的设置，只能是数值。