今天学习了transform的几种变换属性

transform变换

transform: translate(x,y);

1、2D移动是2D转换里面的一个功能，可以改变元素在页面中的位置，类似定位。
2、如果只需要移动移动X轴：transform: translateX(100px)；
3、如果只需要移动移动Y轴：transform: translateY(100px)；

重点：
1、定义2D转换，表示在x轴和y轴上的平移。
2、translate最大的优点：不会影响其他元素的位置。
3、translate中的百分比单位是相对于自身的 transform: translate(50%,50%);

应用小场景：
移动盒子的位置有三种方法：定位，盒子的外边距，2d转换移动。
这里演示2d转换移动的。

让一个盒子水平垂直居中：

		<!-- 父盒子 -->
		<div class="father">
			<!-- 子盒子  -->
        	<div class="son"></div>
    	</div>

		.father {
   
			/* 子绝父相 */
            position: relative;
            width: 1500px;
            height: 1500px;
            background-color: pink;