### CSS `transform` 中 `translate` 的使用方法 CSS `transform` 属性中的 `translate` 函数用于在二维或三维空间中移动元素的位置。以下是关于 `translate` 的详细说明和示例代码。 #### 1. 基本语法 `translate` 的基本语法如下： ```css transform: translate(tx, ty); ``` - `tx`：表示水平方向上的位移量，可以是长度值（如 `px`、`em`）或百分比。 - `ty`：表示垂直方向上的位移量，如果省略，则默认为 `0`[^1]。 #### 2. 示例代码 以下是一个简单的 `translate` 示例，展示如何将一个元素向右移动 `50px` 并向下移动 `30px`： ```css .element { transform: translate(50px, 30px); } ``` #### 3. 使用百分比 当使用百分比时，`translate` 的水平位移基于元素自身的宽度计算，而垂直位移基于元素自身的高度计算： ```css .element { width: 100px; height: 100px; background-color: blue; transform: translate(50%, 50%); } ``` 上述代码会将 `.element` 向右移动其宽度的一半（即 `50px`），并向下移动其高度的一半（即 `50px`）[^2]。 #### 4. 三维平移 通过 `translate3d` 函数，可以在三维空间中移动元素： ```css transform: translate3d(tx, ty, tz); ``` - `tz`：表示沿 Z 轴的位移量，正值表示远离屏幕，负值表示靠近屏幕。 以下是一个使用 `translate3d` 的示例： ```css .container { perspective: 600px; } .element { width: 100px; height: 100px; background-color: red; transform: translate3d(0, 0, -100px); } ``` 上述代码将 `.element` 沿 Z 轴向后移动 `100px`。 #### 5. 动画效果 结合 `@keyframes` 和 `transform: translate`，可以创建动态的平移动画。以下是一个摇晃动画的示例： ```css @keyframes shake { 0% { transform: translateX(0); } 10% { transform: translateX(-20px); } 20% { transform: translateX(20px); } 30% { transform: translateX(-20px); } 40% { transform: translateX(20px); } 50% { transform: translateX(-20px); } 60% { transform: translateX(20px); } 70% { transform: translateX(-20px); } 80% { transform: translateX(20px); } 90% { transform: translateX(-20px); } 100% { transform: translateX(0); } } .shake { animation: shake 1s ease infinite; } ``` 上述代码会让应用了 `.shake` 类的元素左右摇晃[^2]。 #### 6. 注意事项 - 如果需要在三维空间中使用 `translate`，必须确保父容器设置了 `perspective` 属性，否则三维效果