CSS 2D转换

2D转换----可以是实现元素的位移、旋转、缩放等效果
移动（translate）:---改变标签在二维平面上的位置和形状
**移动盒子的位置的方法：定位 	盒子的外边距	2D转换移动**
	  transform: translate(x, y)
  只移动x坐标：
 	 transform: translateX(n)
  只移动y坐标：
 	 transfrom: translateY(n) 
如果里面的参数是 % 移动的距离是 盒子自身的宽度或者高度来对比的 }
div {
    position: relative;
    width: 500px;
    height: 500px;
    background-color: pink;
    }
p {
  定位的方式：（子绝父相）
    position: absolute;
    top: 50%;
    left: 50%;
    width: 200px;
    height: 200px;
    background-color: purple;
   1、【 margin-top: -100px;
    margin-left: -100px;】
  
   2、【 transform: translate(-50%, -50%); （ 盒子往上走自己高度的一半）】
  }
        
span {
    /* translate 对于行内元素是无效的 */
    transform: translate(300px, 300px);
     }


旋转rotate:---让元素在二维平面内顺时针或者逆时针旋转}
	img:{
		/*顺时针旋转45度*/
	 /* transform: rotate(45deg);*/
	 /*过渡到本身上，谁给动画给谁加*/ 
	 transform: all 0.3s;
	}
	img:hover {
	  transform: rotate(360deg)
	}
注意：
	-rotate 里面跟度数，单位是 deg
	-角度为正时，顺时针，角度为负时，逆时针
	-默认旋转的中心点是元素的中心点
	-注意后面的参数 x 和 y 用 空格 隔开
	-x y 默认旋转的中心点是元素的中心(50% 50%),等		价于center center
	-还可以给x y 设置像素或者方位名词(top、bottom、left、right、center)

设置元素旋转的中心的（transform-origin）:
  transform-origin: x y;

缩放scale:
transform: scale(x, y);
注意：
	- x与y之间用逗号进行分隔，不跟单位
	- transform: scale(1, 1): 宽高都放大一倍，相当于没有放大
	【等比例缩放】
	- transform: scale(2, 2): 宽和高都放大了二倍
	- 简写 transform: scale(2): 如果只写了一个参数，第二个参数就和第一个参数一致
	- transform:scale(0.5): 缩小
	- scale 最大的优势:可以设置转换中心点缩放，默认以中心点缩放，而且不影响其他盒子

2D 转换综合写法以及顺序问题：
-同时使用多个转换，其格式为 transform: translate() rotate() scale()
-顺序会影响到转换的效果(先旋转会改变坐标轴方向)
-当我们同时有位置或者其他属性的时候，要将**位移放到最前面**}
div:hover {
  transform: translate(150px, 50px) rotate(180deg) scale(1.2)
}