10、转换

2D转换：是改变标签在二维平面上的位置和形状的一种技术，（原点、x轴、y轴）
       转换（transform）：可以实现元素的位移、旋转、缩放等效果；可以理解为变形；
          移动：translate
          旋转：rotate
          缩放：scale
     
     1、移动（translate）：可以改变元素在页面中的位置，类似定位；（相对定位）       （移动盒子位置的方法：定位、外边距、2D转换移动）；
         语法：transform：translate（x，y）；（或者分开写）
              transform：translateX（n）；
              transform：translateY（n）；
        （1）x就是在x轴上移动位置，y就是在y轴上移动位置  中间用逗号隔开；
        （2）translate的最大优点就是不会影响到其他元素的位置；
        （3）translate中的百分比单位是相对于自身元素的translate：（50%，50%）；
             （%移动的距离是盒子本身的宽度或者高度来进行计算的）
             （translate（-50%，-50%）对比子绝父相的水平垂直居中---[margin-top：-盒子高度的一半；margin-left：-盒子宽度的一半；]）
        （4）对行内标签没有效果；

     2、旋转（rotate）：2D旋转指的是让元素在二维平面内顺时针旋转或者逆时针旋转；
          语法：transform：rotate（度数）；
        （1）rotate里面跟度数，单位是deg，不能省略，比如rotate（45deg）；
        （2）角度为正时，顺时针；角度为负时，逆时针；
        （3）默认旋转的中心点是元素的中心点；

        设置元素转换的中心点：transform-origin：x  y； 
                  注意：（1）后面的参数x和y是用空格隔开的；
                        （2）x y 默认转换的中心点是元素的中心点（50%，50%）；
                        （3）还可以给x  y设置像素（px）百分比（%）或者方位名词（top  bottom  left  right  center ） 

     3、缩放（scale）：可以放大和缩小  
          语法：transform：scale（x，y）；
         （1）注意其中的x和y是用逗号隔开的，里面的参数是数字不跟单位  可以是小数  
         （2）transform：scale（1，1）：宽高都放大了一倍，相对于没有放大；
         （3）transform：scale（2，2）：宽高都放大了两倍；
         （4）transform：scale（2）；只写一个参数，第一个参数则和第二个参数一样  相当于scale（2）；
         （5）transform：scale（0.5，0.5）；小于1 则是缩小
         （6）scale相对于直接设置宽高的缩放来说：是可以设置中心点的，默认以中心点缩放的，而且不会影响其他的盒子

     4、综合写法
         注意：（1）同时使用多个转换，其格式为：transform：translate（）rotate（）scale（）....等；
               （2）其顺序会影响坐转换的效果；（先旋转会改变坐标轴的方向）；
               （3）当同时有位移和其他属性时，记得要将位移放在最前面；