一、使用 `transform: translate()`
这是最常用的位移方法，通过改变元素的位置但不影响文档流（其他元素位置不变）。
1. **基本语法**
css
.element {
transform: translate(x, y); /* x 和 y 可以是 px、% 等单位 */
}
2. **示例**
css
/* 向右移动 50px，向下移动 20px */
.move-right-down {
transform: translate(50px, 20px);
}
/* 向左移动 30%（相对于自身宽度） */
.move-left {
transform: translate(-30%, 0);
}
/* 向上移动 10px */
.move-up {
transform: translate(0, -10px);
}
二、分别控制 X 和 Y 轴
使用 `translateX()` 和 `translateY()` 可以单独控制水平或垂直方向的位移。
css
/* 仅水平向右移动 50px */
.move-right {
transform: translateX(50px);
}
/* 仅垂直向下移动 20px */
.move-down {
transform: translateY(20px);
}
三、百分比位移的特性
当使用百分比作为单位时，位移距离是相对于**元素自身的宽高**。这在居中元素时非常有用：
css
/* 水平和垂直居中元素（相对于父元素） */
.centered {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%); /* 向左上移动自身宽高的50% */
}
四、3D 位移（Z 轴）
使用 `translateZ()` 或 `translate3d()` 可以在 3D 空间中移动元素（需要配合 `perspective` 属性）。
css
.move-3d {
transform: translate3d(10px, 20px, 30px); /* X、Y、Z 轴位移 */
}
五、与过渡/动画结合
通过 `transition` 或 `animation` 可以实现平滑的位移效果。
1. **过渡（Hover 效果）**
css
.box {
transition: transform 0.3s ease;
}
.box:hover {
transform: translate(10px, 10px); /* 鼠标悬停时向右下移动 */
}
2. **动画（无限移动）**
css
@keyframes float {
0% { transform: translateY(0); }
50% { transform: translateY(-20px); }
100% { transform: translateY(0); }
}
.floating {
animation: float 3s ease-in-out infinite; /* 上下浮动效果 */
}
六、与定位属性（position）对比
| **方式** | **是否影响文档流** | **参考点** | **性能** |
|--------------------|--------------------|--------------------------|----------|
| `transform` | 否 | 元素自身 | 高 |
| `position + top/left` | 是（或通过 `absolute` 脱离） | 父元素或文档 | 低 |
七、位移原点（transform-origin）
通过 `transform-origin` 可以改变位移的参考点（默认是元素中心）。
css
/* 以左上角为原点向右下移动 */
.move-from-top-left {
transform-origin: top left;
transform: translate(50px, 50px);
}
示例汇总
css
/* 1. 基础位移 */
.basic-move {
transform: translate(20px, 30px);
}
/* 2. 悬停效果 */
.hover-move {
transition: transform 0.5s;
}
.hover-move:hover {
transform: translateX(50px);
}
/* 3. 3D 位移 */
.move-in-3d {
transform: translate3d(10px, 10px, 50px);
}
/* 4. 浮动动画 */
@keyframes float {
0% { transform: translateY(0); }
100% { transform: translateY(-20px); }
}
.float-animation {
animation: float 2s infinite alternate;
}
注意事项
1. **性能优势**：`transform` 不会触发重排（reflow）和重绘（repaint），只触发合成（composite），因此性能更好。
2. **层叠问题**：位移后的元素可能会覆盖其他元素，可通过 `z-index` 调整。
3. **兼容性**：现代浏览器均支持 `transform`，但旧版浏览器（如 IE9-）需要添加 `-webkit-` 前缀。
位移是 CSS 动画和交互效果的基础，结合其他属性（如 `scale`、`rotate`）可以创造出更复杂的视觉效果。