2d转换

一，2D转换的概念：

转换（transform）是css3中具有颠覆性的特征之一，可以实现元素的位移、旋转、缩放等效果。
你也可以简单理解为变形。
二，2d转换的功能
1，移动：
2D移动是2D转换里的一种功能，可以改变元素在页面中的位置，类似定位。
语法
transform: translate(x,y);
transform: translateX(n);
transform: translateY(n);
重点：
      1，translate最大的优点：不会影响其他元素的位置
      2，translate中的百分比单位是相对于自身元素的translate:(50%,50%);
对行内标签没有效果
2，缩放：
2D缩放：使用scale()函数，让元素根据中心原点对对象进行缩放，默认值为1

-   语法：scale(x & y) 
          scale(x, y)
          也可以设置scaleX()或者scaleY()
     重点：
-          1，只设置一个值，是让整体缩放，设置两个值则是各自设置
-          2，不会影响其他元素的位置
           3，可以设置转换中心点缩放，默认以中心点缩放，而且不影响其他盒子。
 3，旋转：使用rotate()函数，通过传入的角度值使元素绕z轴旋转
    语法：transform: rotate(度数)       
重点
       1，rotate里面跟度数，单位为 deg
       2，度数为正时，顺时针，负时，逆时针
       3.默认旋转的中心点是元素的中心点
 4，设置元素转换中心点：
 转换中心点 ：通过transform-origin来对元素的转换中心点进行设置
  语法：transform-origin: x y;
重点：

        1，注意后面的参数x和y用空格隔开
        2，默认转换的中心点是元素的中心点 （50% 50%）
        3 可以给x y设置像素或者方位名词 
5，2d转换的复合写法
语法：transform:translate() rotate() scale()
重点：
         1，其顺序会影响转换效果
         2，当我们同时有位移和其他属性时，记得要将位移放到最前面。