css动画位移制作
CSS动画位移制作方法
使用transform属性的translate函数实现元素位移。水平位移用translateX()，垂直位移用translateY()，双向位移用translate()。
.box {
transform: translateX(100px); /* 向右移动100px */
transform: translateY(-50px); /* 向上移动50px */
transform: translate(20px, 30px); /* 右移20px，下移30px */
}关键帧动画实现位移
通过@keyframes定义位移过程，结合animation属性应用动画。
@keyframes moveRight {
from { transform: translateX(0); }
to { transform: translateX(200px); }
}
.element {
animation: moveRight 2s ease-in-out infinite alternate;
}过渡效果实现平滑位移
使用transition属性让位移变化更平滑。需在触发状态（如:hover）改变位移值。
.item {
transition: transform 0.3s ease;
}
.item:hover {
transform: translate(50px, 0);
}3D空间位移
通过translate3d()函数实现Z轴位移，需在父元素设置perspective。
.container {
perspective: 1000px;
}
.object {
transform: translate3d(100px, 50px, -200px);
}注意事项
- 百分比单位基于元素自身尺寸计算，如
translateX(50%)移动元素宽度的一半。 - 位移不会影响文档流，原位置保留。
- 硬件加速优化：使用
transform而非top/left属性。
