定义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>
<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>
<div></div>
</body>
</html>
西瓜watermelon
粉丝
