元素使用transform：scale 属性后，再用transform：translate（x,y）对元素进行移动，
会发现，移动距离和预想的不一致。
设置scale后，元素实际移动距离（效率）=设置值*scale
示例
目的：下面的粉色div，对元素进行缩放0.5倍后，将该元素移动到左上角
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.container{
width: 1000px;
height: 1000px;
background-color: #ccc;
margin-top: 50px;
}
.target{
width: 1000px;
height: 200px;
background-color: pink;
transform: scale(0.75) translate(-166px,-33px);
transform: scale(0.5) translate(-500px,-100px);
}
.other{
width: 1000px;
height: 200px;
background-color: green;
}
</style>
</head>
<body>
<div class="container">
<div class="target">
0.75 166=(1000-750)/2/0.75
<p> 0.5 500=(1000-500)/2/0.5</p>
</div>
<div class="other"></div>
</div>
</body>
</html>
首先，我们对元素进行缩放后，元素大小变化，但是占位的大小和位置都不会变，并且是对于元素的中心点来进行缩放，也就是缩放后元素会水平垂直居中显示。
上面例子中，如果移动距离（效率）和缩放前一样的话，那么我们应该只需要向左移动250px和向上移动50px就行了，可实际上，得移动双倍的距离才符合我们的预期。
结论：元素设置scale后，translateX（x）移动的距离=设置的值*缩放倍数
