变形可以改变盒子在平面内的形态(位移,旋转,缩放等等) 一、位移 translate translate可以使盒子沿着X轴或者Y轴来移动 1.基本语法： transform：translateX(数值) transform：translateY(数值) transform：translate(x,y)
transform: translate(x, y);
x与y之间使用逗号隔开
1.1 水平方向移动30px 垂直方向移动40px
transform: translate(30px,40px);
1.2 只移动水平方向
transform: translateX(50px);
1.3 只移动水平方向,垂直方向不移动 直接写0
transform: translate(60px,0);
1.4 如果translate里面只写一个数值 表示水平方向
transform: translate(100px);
1.5 如果xy都移动 中间使用空格隔开
transform: translateX(200px) translateY(100px);
简写方式: transform: translate(x, y)
1.6 如果数值为百分比,参照盒子自身尺寸移动 移动的时候可以写百分比，如果使用的百分比，移动的是盒子**自身的宽度**
transform: translate(50%,50%);
2.translate与margin区别 2.1margin移动盒子会影响其它的盒子。把其它人挤走。 2.2位移translate移动盒子不会影响其他的盒子。不脱标。
二、旋转 rotate 旋转可以让盒子旋转角度。 1.基本语法 transform: rotate(45deg); 一定要写单位 如果是正度数，则是顺时针旋转 如果是负度数，则是逆时针旋转
img {
width: 200px;
transition: .5s;
}
img:hover {
/* 旋转语法 */
transform: rotate(-360deg);
}
.arr {
width: 40px;
height: 40px;
border-right: 2px solid pink;
border-bottom: 2px solid pink;
transform: rotate(-45deg);
}
2.设置中心点 transform-origin 2.1基本语法 transform-origin: right bottom; 可以取方位名词 transform-origin: x y x 与 y之间使用空格隔开
三、复合写法 1.如果需要移动，也需要旋转，则一定先写移动，后写旋转, css属性书写顺序影响代码执行。 2.注意，多个值之前用 空格隔开。
transform: translate(-50%, -50%) rotate(360deg);
四、缩放 scale 1.基本语法 transform: scale(1.2)； 1.1它比这宽度和高度最大的优势： 他是用中心点来进行缩放的，同样他不会影响其他的盒子。 1.2括号里数值不需要加单位 1.3大于1就是放大 小于1就是缩小
