2D转化位移
语法：
transform: translate(x, y);
x 代表元素在水平方向的位移
y 代表元素在垂直方向的位移
例如：
div {
width: 200px;
height: 200px;
/*元素在水平方向向右移动200px，在垂直方向向下移动300px*/
transform: translate(200px, 300px);
}
总结：
1.如果只设置了一个，那么代表元素只在水平方向发生位移
2.可以设置负数，负数代表位移的相反方向
3.可以设置百分比，相对元素的宽度或者高度
4.位移没有让元素脱标
位移的使用小技巧：可以让绝对定位的元素居中显示
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
2D转化旋转
语法：
transform: rotate(角度)；
备注：
角度的单位是以 deg 为单位的。 如： 30deg [30度]
例如：
div {
width: 200px;
height: 200px;
transform: rotate(30deg)；
}
总结：
1. 正数代表元素顺时针旋转
2. 负数代表元素逆时针旋转
3. 默认是绕着元素中心位置旋转
4. 改变旋转中心位置通过 transform-origin 属性设置，取值为： left | right | top | bottom | cneter
例如：
div {
width: 200px;
height: 200px;
transform-origin: left top;
transform: rotate(30deg);
}
2D转化缩放
语法：
transform: scale(width, height);
备注：
1. 第一个值width表示元素宽度的倍数【不能设置负数】
2. 第二个值height表示元素高度的倍数【不能设置负数】
例如：
div {
width: 200px;
height: 200px;
/*元素宽度是原来的2倍，高度是原来的3倍*/
transform: scale(2, 3);
}
总结：
1. 如果设置一个值，代表宽度和高度同时放大或缩小相应的倍数
2. 如果设置的值大于1，表示放大
3. 如果设置的值大于0,小于1,表示缩小
4. 如果设置的值等于1，表示大小不变
5. 如果设置的值等于0，表示宽度或高度为0
如果设置多个属性，要使用复合属性的写法
transform: translate() rotate() scale()；
