这是我参与8月更文挑战的第27天，活动详情查看：8月更文挑战
2D移动translate
2D移动是2D转换中的一种功能，可以改变元素在页面中的位置，类似定位。
语法
{
transform: translate(x, y); /*x,y分别表示x轴和y轴移动的距离*/
}
/*或者分开写*/
{
transform: translateX(n);
transform: translateY(n);
}
特点
- 定义2D转换中的移动，沿着X和Y轴移动元素
- translate最大优点：不会影响其他元素的位置
- translate中的百分比单位是相对于自身元素的translate(50%,50%）
- 对行内标签没有效果
2D旋转rotate
2D旋转指的是让元素在2维平面内顺时针旋转或者逆时针旋转
语法
{
transform: rotate(度数);
}
特点
- rotate里面跟度数，单位是：deg，例如： rotate(45deg)
- 度数为正数时顺时针旋转，为负数时逆时针旋转
- 默认旋转的中心点是元素的中心点
2D转换中心点transform-origin
元素转换默认是以元素的宽和高的50%作为中心点，我们可以手动设置元素转换的中心点
语法
{
transform-origin: x y;
}
特点
- 后面的参数x和y是用空格隔开
- x y默认转换的中心点是元素的中心点（50% 50%）
- 还可以给x和y设置像素或者方位名词（top bottom left right center）
2D转换缩放scale
缩放，顾名思义就是可以放大和缩小，只要给元素添加了这个属性就能控制它的放大和缩小。
语法
{
transform: scale(x, y);
}
特点
- 参数x和y以逗号分隔
- 参数x和y没有单位，而是放大或缩小宽度和高度的倍数
- transform:scale(1,1)宽和高放大一倍，相当于没放大
- transform:scale(2,2)宽和高放大2倍
- transform:scale(2)：只写一个参数时，第二个参数默认跟第一个参数一样，相当于transform:scale(2,2)
- transform:scale(0.5,0.5)宽和高缩小0.5倍
- scale缩放的最大优势：可以设置缩放的中心点，默认以中心点缩放，而且不会影响其它盒子。
2D转换综合写法
综合写法即上面的一个或多个方法可以同时使用
用法与特点
- 同时使用多个转换，格式为: transform: translate(x,y) rotate(Xdeg) scale(x,y) ...
- 多个转换中间以空格分隔
- 方法的顺序会影响转换的效果。（如果先旋转则会影响坐标轴的方向）
- 当同时有位移和其它属性的时候，记得要将位移放在最前面
示例代码
<!DOCTYPE html>
<html>
<head>
<title>demo</title>
<style>
div {
width: 200px;
height: 200px;
background-color: pink;
transition: all 0.8s;
}
div:hover {
transform: translate(150px, 100px) rotate(360deg) scale(2);
}
</style>
</head>
<body>
<div></div>
</body>
</html>
