transform（translate）

### CSS Transform 和 Translate 的使用方法

#### 变形概述
`transform` 是一种用于改变元素视觉外观的属性，可以实现平移、旋转、缩放和倾斜等多种效果。此功能允许开发者通过简单的声明来操作页面上的对象位置和形状[^1]。

#### `translate()` 函数介绍
`translate()` 函数用来沿 X 轴或 Y 轴移动元素的位置而不影响文档流中的其他部分。它接受两个参数分别代表水平方向 (X) 和垂直方向 (Y)，如果只提供了一个数值，则默认第二个值为零。这使得网页设计师能够轻松地调整 HTML 元素的空间定位而无需更改其原始布局设置[^3]。

/* 单轴位移 */
.element {
  transform: translate(50px);
}

/* 双轴位移 */
.another-element {
  transform: translate(50px, 100px);
}

#### 组合变换实例
除了单独应用外，还可以在同一规则内串联多个转换命令以达到更复杂的效果：

.complex-transform {
  /* 向右偏移50像素并向上抬升20像素的同时顺时针旋转45度角 */
  transform: translate(50px,-20px) rotate(45deg);
}

#### 动画示例 - 震动效果
下面是一个利用 `@keyframes` 定义的关键帧动画配合 `translateX()` 来模拟物体摇晃的例子:

@keyframes shake {
  from { transform: translateX(0); }
  10%, 30%, 50%, 70%, 90% { transform: translateX(-20px); }
  to,
  20%, 40%, 60%, 80% { transform: translateX(20px);}
}

.shake-effect{
  animation-name: shake;
  animation-duration: 0.5s;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}

上述代码片段展示了如何创建一个持续不断的震动效果，其中被赋予 `.shake-effect` 类名的对象将会按照指定的时间间隔左右摆动[^4]。