一、使用 `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`)可以创造出更复杂的视觉效果。