CSS 平移语法
在 CSS3 中，我们可以使用 transform 属性和 translate() 函数来实现元素的平移效果。
语法：
transform: translateX(x); /* 沿 X 轴方向平移 */
transform: translateY(y); /* 沿 Y 轴方向平移 */
transform: translate(x, y); /* 同时沿 X 轴和 Y 轴平移 */说明：
平移函数有 3 种：translate()、translateX()、translateY()。参数 x 表示元素在 X 轴方向上的移动距离，参数 y 表示元素在 Y 轴方向上的移动距离，两者的单位可以为 px、em 和百分比等。
特别注意，CSS 平移使用的坐标系是 “CSS 坐标系”，而非 “数学坐标系”。其中，CSS 坐标系的 y 轴方向是向下的，而数学坐标系的 y 轴方向是向上的，如下图所示。
CSS 平移示例
接下来，我们通过几个简单的例子来讲解 CSS 是如何实现平移效果的。
示例 1：translateX(x) 实现 CSS 平移
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
body { padding: 100px; }
/* 设置原始元素样式 */
#origin {
width: 200px;
height: 100px;
border: 1px dashed black;
}
/* 设置当前元素样式 */
#current {
width: 200px;
height: 100px;
color: white;
background-color: hotpink;
opacity: 0.6;
transform: translateX(20px);
}
</style>
</head>
<body>
<div id="origin">
<div id="current"></div>
</div>
</body>
</html>页面效果如下图所示。
分析：
transform: translateX(20px); 表示元素沿着 X 轴向右平移 20px。如果把 transform: translateX(20px); 改为 transform: translateX(-20px);，则元素会沿着 X 轴向左平移 20px，此时页面效果如下图所示。
实际上，transform: translateX(20px); 等价于 transform: translate(20px, 0);，小伙伴们可以自行测试一下。
示例 2：translateY(y) 实现 CSS 平移
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
body { padding: 100px; }
/* 设置原始元素样式 */
#origin {
width: 200px;
height: 100px;
border: 1px dashed black;
}
/* 设置当前元素样式 */
#current {
width: 200px;
height: 100px;
color: white;
background-color: hotpink;
opacity: 0.6;
transform: translateY(20px);
}
</style>
</head>
<body>
<div id="origin">
<div id="current"></div>
</div>
</body>
</html>页面效果如下图所示。
分析：
transform: translateY(20px); 表示元素沿着 Y 轴向下平移 20px。如果把 transform: translateY(20px); 改为 transform: translateY(-20px);，则元素沿着 Y 轴向上平移 20px，此时页面效果如下图所示。
实际上，transform: translateY(20px); 其实可以等价于 transform: translate(0, 20px);，小伙伴们可以自行测试一下。
示例 3：translate(x, y) 实现 CSS 平移
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
body { padding: 100px; }
/* 设置原始元素样式 */
#origin {
width: 200px;
height: 100px;
border: 1px dashed black;
}
/* 设置当前元素样式 */
#current {
width: 200px;
height: 100px;
color: white;
background-color: hotpink;
opacity: 0.6;
transform:translate(20px, 40px);
}
</style>
</head>
<body>
<div id="origin">
<div id="current"></div>
</div>
</body>
</html>页面效果如下图所示。
分析：
transform: translate(20px, 40px); 表示元素同时在 x 轴和 y 轴两个方向上同时平移，其中沿着 x 轴向右平移 20px，沿着 y 轴方向向下平移 40px。实际上，transform: translate(20px, 40px); 可以等价于以下代码：
transform: translateX(20px) translateY(40px);需要注意的是，transform: translate(20px, 40px); 并不等价于以下代码：
transform: translateX(20px);
transform: translateY(40px);这是因为，如果在同一个选择器中写两行 transform 属性，那么后面的一行会覆盖前面的一行。因此，上面的代码实际上只执行了 translateY(40px)。
在实际开发中，单纯对某个元素定义平移是没有太多意义的。在实际开发中，CSS 平移大多数情况下都是结合 CSS 过渡 或 CSS 动画 来一起使用。
