CSS translateX() 语法
在 CSS 中，translateX() 函数一般作为 transform 属性的值，用于沿水平方向（X 轴）移动元素。
语法：
transform: translateX(distance);说明：
distance 表示元素沿 X 轴的移动距离，它可以是正值（向右移动）、负值（向左移动）或 0（无移动）。
其中，位移单位可以是长度单位（如 px、rem、vw）、百分比（%）或无单位值（表示 0）。
对于 translateX() 函数，小伙伴们还需要清楚以下几点：
- 使用 translateX() 移动的元素，在页面中的初始位置仍然会保留，而不会影响其它元素的位置。
- translateX() 可以与其他变换函数（如 rotate()、scale()、skew()）组合使用，不过它们的使用顺序会影响最终效果。
- 大多数情况下，translateX() 都是配合 CSS 过渡 来实现过渡效果，或配合 CSS 动画 来实现动画效果。
- 当 translateX() 使用百分比单位时，它参考的是元素自身的宽度，不是父元素的宽度。
提示: CSS 与平移相关的函数有 3 个：translate()、translateX()、translateY()。
CSS translateX() 摘要
| 属于 | CSS 平移 |
|---|---|
| 使用频率 | 中 |
| 兼容性 | 查看 |
| 官方文档 | 查看 |
| MDN | 查看 |
CSS translateX() 示例
接下来，我们通过几个简单的例子来讲解一下 CSS translateX() 函数是如何使用的。
示例 1：translateX() 实现水平移动
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
div {
width: 100px;
height: 100px;
background-color: lightskyblue;
transform: translateX(50px);
}
</style>
</head>
<body>
<div></div>
</body>
</html>页面效果如下图所示。
分析：
在这个例子中，transform: translateX(50px) 将 div 元素向右移动 50px。位移是相对于元素初始位置的，元素在文档流中的位置保持不变。
示例 2：translateX() 结合 CSS 过渡
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
div {
width: 100px;
height: 100px;
background-color: hotpink;
transition: transform 0.3s ease;
}
div:hover {
transform: translateX(100px);
}
</style>
</head>
<body>
<div></div>
</body>
</html>页面效果如下图所示。
分析：
在这个例子中，我们使用了 transition 属性来实现过渡效果。当鼠标移到 div 元素上时，会平滑地向右移动 100 px。
示例 3：translateX() 使用百分比单位
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
div {
width: 200px;
height: 100px;
background-color: lightskyblue;
transform: translateX(50%);
}
</style>
</head>
<body>
<div></div>
</body>
</html>页面效果如下图所示。
分析：
在这个例子中，translateX(50%) 表示将 div 元素向右移动，其移动距离为 “自身宽度的 50%” ，也就是 100px。其中，百分比是基于元素自身尺寸而言的。
示例 4：translateX() 结合 CSS 动画
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
@keyframes slide {
0% { transform: translateX(0); }
50% { transform: translateX(200px); }
100% { transform: translateX(0); }
}
div {
width: 100px;
height: 100px;
background-color: hotpink;
animation: slide 2s infinite ease-in-out;
}
</style>
</head>
<body>
<div></div>
</body>
</html>页面效果如下图所示。
分析：
在这个例子中，我们使用 @keyframes 规则定义了一个名为 “slide” 的 CSS 动画。该动画可以使得 div 元素在 2 秒内从初始位置向右移动 200px 再返回，并且无限循环播放。
