CSS translate() 语法
在 CSS 中，translate() 函数一般作为 transform 属性的值，用于在二维或三维空间中移动元素。
语法：
/* 二维移动 */
transform: translate(x, y);
/* 三维移动 */
transform: translate3d(x, y, z); /* 用于 3D 空间移动 */说明：
需要注意的是，translate() 函数必须要搭配 transform 属性一起使用。它接收以下参数。
x：表示沿 X 轴（水平）的位移，正值表示向右移动，负值表示向左移动。y：表示沿 Y 轴（垂直）的位移，正值表示向下移动，负值表示向上移动。z（仅用于 translate3d）：表示沿 Z 轴（深度）的位移，正值向外移动，负值向内移动。
x、y、z 的值主要是长度单位（如 px、em、rem 等）或百分比（%）。（注：z 轴通常只接受长度单位，不支持百分比）。
对于 translate() 函数，小伙伴们还需要清楚以下几点：
- translate() 只会改变元素的视觉位置，而不会打乱原本的页面布局（即不会影响周围的元素）。
- 如果只是想在一个方向上移动元素，可以单独使用 translateX(x) 或 translateY(y) 来实现。
- translate() 支持与 var()、calc() 等其他 CSS 函数结合使用。
提示: CSS 与平移相关的函数有 3 个：translate()、translateX()、translateY()。
CSS translate() 摘要
| 属于 | CSS 平移 |
|---|---|
| 使用频率 | 高 |
| 兼容性 | 查看 |
| 官方文档 | 查看 |
| MDN | 查看 |
CSS translate() 示例
接下来，我们通过几个简单的例子来讲解一下 CSS translate() 函数是如何使用的。
示例 1：translate() 实现水平移动
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
div {
width: 100px;
height: 100px;
background-color: lightskyblue;
transition: transform 0.5s;
}
div:hover {
transform: translate(200px, 0);
}
</style>
</head>
<body>
<div></div>
</body>
</html>页面效果如下图所示。
分析：
transform: translate(200px, 0) 表示水平方向移动距离为 200px，而垂直方向移动距离为 0。
示例 2：translate() 垂直移动与 CSS 变量
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
:root {
--offset: 200px;
}
div {
width: 100px;
height: 100px;
background-color: hotpink;
transition: transform 0.3s;
}
div:hover {
transform: translateY(var(--offset));
}
</style>
</head>
<body>
<div></div>
</body>
</html>页面效果如下图所示。
分析：
在这个例子中，我们首先定义了一个 CSS 变量（即 --offset），该变量用于保存位移距离。由于 --offset 的值为 200px，因此 translateY(var(--offset)) 等价于 translateY(200px)。
示例 3：translate() 实现 3D 位移动画
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
@keyframes move {
0% { transform: translate3d(0, 0, 0); }
50% { transform: translate3d(100px, 50px, 50px); }
100% { transform: translate3d(0, 0, 0); }
}
div {
width: 100px;
height: 100px;
background-color: lightskyblue;
animation: move 2s infinite;
}
</style>
</head>
<body>
<div></div>
</body>
</html>页面效果如下图所示。
分析：
在这个例子中，我们使用 @keyframes 规则定义了一个 CSS 动画。translate3d(100px, 50px, 50px) 用于在动画中将 div 元素同时沿 X、Y、Z 轴移动，从而创建三维效果。
