平移函数(Translate functions)的作用是在二维或三维空间中，对元素进行平移操作，改变元素的位置。
目前平移函数有 translateX() 、translateY()、translateZ()、translate()、translate3d() 。
translateX()
translateX() 用于水平移动一个元素。
例子如下：
<div>Static</div>
<div class="moved">Moved</div>
<div>Static</div>
div {
width: 60px;
height: 60px;
background-color: skyblue;
}
.moved {
transform: translateX(10px); /* Equal to translate(10px) */
background-color: pink;
}
更多可见 translateX()
translateY()
垂直移动一个元素。
例子：
<div>Static</div>
<div class="moved">Moved</div>
<div>Static</div>
div {
width: 60px;
height: 60px;
background-color: skyblue;
}
.moved {
transform: translateY(10px);
background-color: pink;
}
更多可见 translateY()
translateZ()
沿 z 轴平移一个元素。
translateZ(tz) 等同于 translate3d(0, 0, tz)。
tz 为正值，则使元素朝向观察者移动；负值，则朝远离观察者方向移动
在这个示例中，创建了两个盒子。第一个盒子在页面上正常定位，完全未进行平移。第二个盒子则通过应用透视（perspective）来创建 3D 空间，然后向用户方向移动。
html：
<div>Static</div>
<div class="moved">Moved</div>
css：
div {
position: relative;
width: 60px;
height: 60px;
left: 100px;
background-color: skyblue;
}
.moved {
transform: perspective(500px) translateZ(200px);
background-color: pink;
}
在类 moved 中，使用 perspective() 函数将观察者相对于 z=0 所在的平面（本质上是屏幕表面）进行定位。值为 500px 意味着用户位于 z=0 处图像的前方 500 像素位置。
然后，translateZ() 函数将元素从屏幕 “向外” 移动 200 像素，朝向用户方向。这会产生以下效果：在 2D 显示器上观看时，元素显得更大；在使用 VR 头显或其他 3D 显示设备时，元素则显得更近。
需要注意的是，如果 perspective() 的值小于 translateZ() 的值（例如 transform: perspective(200px) translateZ(300px);），变换后的元素将不可见，因为它超出了用户视口的范围。透视值与 translateZ() 值的差值越小，用户离元素就越近，平移后的元素看起来就越大。
使用变换函数的组合时，变换函数的顺序很重要，通常来说，需要将
perspective()放在translateZ()前面。 如果类moved中将translateZ()放在perspective()前面，元素就不具备放大效果。
此例子的结果：
更多可见 translateZ()
translate()
在二维平面上，可同时对一个元素进行水平或垂直移动。
translate(10px) 与 translateX(10px) 或 translate(10px, 0) 作用一样。
更多可见 translate()
translate3d()
在三维空间中平移一个元素。
这种变换由三维向量 [tx, ty, tz] 构成，该向量的坐标确定了元素在各个方向上的移动距离。
translate3d(tx, ty, tz)
tx 为 x 轴方向的移动距离；ty 为 y 轴方向的移动距离；tz 为 z 轴方向的移动距离。可以是长度值或百分比。
如下面的例子，html 为
<div>Static</div>
<div class="moved">Moved</div>
<div>Static</div>
css 为
div {
width: 60px;
height: 60px;
background-color: skyblue;
}
.moved {
/* Equivalent to perspective(500px) translateX(10px) */
transform: perspective(500px) translate3d(10px, 0, 0px);
background-color: pink;
}
最终结果为
更多可见 translate3d()
平移函数的应用
避免布局抖动
使用平移函数移动元素，元素不会脱离文档流，可以保证页面布局稳定，元素移动后，不挤占或释放原位置空间，周围元素的布局完全不受影响。。
如这个例子，实现悬浮按钮，按钮向下移动 5px
<button>按钮</button>
<div>内容</div>
button:hover {
margin-top: 5px; /* 下方元素下移 */
}
👆 此例子使用 margin 实现，由于 margin 调整元素外间距后，会挤占其他元素的空间，从而导致按钮下面的元素也向下移动：
<button>按钮</button>
<div>内容</div>
button:hover {
position: absolute;
top: 5px;
}
👆 此例子使用绝对定位，将按钮元素向下移动 5px ，由于绝对定位会使元素脱离文档流，使元素的占位消失，所以按钮下面的元素会占据原按钮的位置，造成页面布局的破坏：
<button>按钮</button>
<div>内容</div>
button:hover {
transform: translateY(5px);
}
👆这个例子使用 translateY 使元素向下移动 5px ，由于平移函数不会脱离文档流，不改变元素在文档流中的原始位置，仅改变视觉渲染位置。因此按钮下面的内容不会跟着向下移动，保证页面布局的稳定：
在开发类似于 tooltips（提示框）的组件时，可借助平移函数进行定位，避免底层内容被推开，保持页面结构稳定。
性能优化
translate() 属于 CSS 变换（transform），其渲染由 GPU 独立处理，不会触发浏览器的回流。
若通过修改 margin、top/left（定位）移动元素，改变了元素的几何位置，会导致浏览器重新计算布局（回流），性能开销较大（尤其在复杂页面中）。
平移函数仅改变视觉位置，不影响布局树，因此性能更优，适合高频动画（如轮播图滑动、列表项平移）。
元素居中
如果使用绝对定位 + 负 margin 实现元素居中，需要提前知道子元素的宽高和手动计算并硬编码负 margin 值
<div class="container">
<div class="centered-box">我是固定尺寸的居中元素！</div>
</div>
.container {
position: relative; /* 关键：定位基准 */
width: 80vw;
height: 300px;
border: 2px dashed #e5e7eb;
margin: 50px auto;
background: #f8f9fa;
}
/* 子元素：需要居中的目标元素（需已知宽高） */
.centered-box {
position: absolute; /* 绝对定位，基于父容器 */
left: 50%; /* X轴：左上角移至父容器水平中心 */
top: 50%; /* Y轴：左上角移至父容器垂直中心 */
/* 关键：负margin 调整 */
width: 200px; /* 子元素固定宽度 */
height: 100px; /* 子元素固定高度 */
margin-left: -100px; /* 向左移动自身宽度的一半（200px/2） */
margin-top: -50px; /* 向上移动自身高度的一半（100px/2） */
background: #3b82f6;
color: white;
border-radius: 8px;
display: flex;
align-items: center;
justify-content: center;
font-size: 18px;
}
效果如下：
如果使用平移函数，则不需要提前知道自身的尺寸，代码更加简洁：
<div class="container">
<div class="centered-box">
我是动态居中的元素！<br>
无论内容多少，都会始终居中。<br>
试试调整我的文字长度或父容器尺寸~
</div>
</div>
.container {
position: relative; /* 关键：定位基准 */
width: 80vw;
height: 400px;
border: 2px dashed #e5e7eb;
margin: 50px auto;
background: #f8f9fa;
}
/* 子元素：需要居中的目标元素 */
.centered-box {
position: absolute; /* 绝对定位，基于父容器 */
left: 50%; /* X轴：左上角移至父容器水平中心 */
top: 50%; /* Y轴：左上角移至父容器垂直中心 */
transform: translate(-50%, -50%); /* 关键：基于自身尺寸偏移 */
/* 子元素样式（动态可变，无需固定宽高） */
padding: 24px 32px; /* 内边距 */
background: #3b82f6; /* 背景色 */
color: white; /* 文字颜色 */
border-radius: 8px; /* 圆角 */
font-size: 18px; /* 文字大小 */
max-width: 80%; /* 最大宽度不超过父容器的80% */
}
效果如下：
总结
平移函数可以方便的移动元素的位置，并且可以触发硬件加速，减少浏览器的回流，性能更优。由于平移函数不会脱离文档流，布局更加稳定，同时实现元素居中也方便，代码简洁。
