CSS translateY() 语法
在 CSS 中，translateY() 函数一般作为 transform 属性的值，用于沿垂直方向（Y 轴）移动元素。
语法：
transform: translateY(distance);说明：
distance 表示元素沿 Y 轴的移动距离，可以是正值（向下移动）、负值（向上移动）或 0（无移动）。
位移单位可以是长度单位（如 px、rem、vh）、百分比（相对于元素自身高度）或无单位值（表示 0）。
对于 translateY() 函数，我们需要清楚以下几点：
- 使用 translateY() 移动元素时，不会改变元素在 HTML 中的实际位置，也不会影响其他元素的排布。它只是在视觉上 “挪动” 了一下。
- translateY() 可以和其他变换函数（如 rotate()、scale()、skew() 等）一起使用。
- translateY() 大多数情况下都是搭配 CSS 的 transition 或 animation 一起使用，来实现上下移动动画。
- translateY() 使用百分比（如 translateY(50%)）时，这个百分比是基于元素自身的高度，而不是父元素的高度。
提示: CSS 与平移相关的函数有 3 个：translate()、translateX()、translateY()。
CSS translateY() 摘要
| 属于 | CSS 平移 |
|---|---|
| 使用频率 | 中 |
| 兼容性 | 查看 |
| 官方文档 | 查看 |
| MDN | 查看 |
CSS translateY() 示例
接下来，我们通过几个简单的例子来讲解一下 CSS translateY() 函数是如何使用的。
示例 1：translateY() 实现垂直移动
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
div {
width: 100px;
height: 100px;
background-color: lightskyblue;
transform: translateY(50px);
}
</style>
</head>
<body>
<div></div>
</body>
</html>页面效果如下图所示。
分析：
在这个例子中，transform: translateY(50px) 表示将 div 元素向下移动 50px。其中，位移是相对于元素初始位置的，元素在文档流中的位置保持不变。
示例 2：translateY() 结合 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: translateY(100px);
}
</style>
</head>
<body>
<div></div>
</body>
</html>页面效果如下图所示。
分析：
在这个例子中，我们使用了 transition 属性来实现过渡效果。当鼠标移到 div 元素上时，它会平滑地向下移动 100 px。
示例 3：translateY() 使用百分比单位
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
div {
width: 100px;
height: 200px;
background-color: lightskyblue;
transform: translateY(50%);
}
</style>
</head>
<body>
<div></div>
</body>
</html>页面效果如下图所示。
分析：
在这里，translateY(50%) 表示 div 元素向右移动，移动距离为 “自身高度的 50% ” ，即 100px。其中，百分比是基于元素自身高度来说的。
示例 4：translateY() 结合 CSS 动画
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
@keyframes slide {
0% { transform: translateY(0); }
50% { transform: translateY(200px); }
100% { transform: translateY(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 再返回，并且会无限循环。
