水平移动：
transform: translateX(100px);
沿着x轴向右移动100px，向左-100px
垂直移动：
transform: translateY(100px);
沿着Y轴向上移动100px，向下就是-100px
对角线移动：
transform: translate(100px,100px); 对应x轴，y轴坐标
<!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>
div{
width: 200px;
height: 200px;
background: red;
transition: all 2s;
margin: 100px auto;
}
.box1:hover{
/* transform: translateX(100px) translateY(100px); */
transform: translate(100px,100px);
/* 对角线移动 */
}
.box2:hover{
transform: translateX(100px);
/* x轴向右移动100px。向左-100px */
}
</style>
</head>
<body>
<div class="box1"></div>
<div class="box2"></div>
</body>
</html>