css中translate用法
在 CSS 中，`translate()` 函数是一个用于移动元素的 2D 变换函数。它允许你沿着 X 轴和 Y 轴移动元素，提供了一种相对于元素当前位置的位移方式。
基本语法：
```css
transform: translate(tx, ty);
```
- `tx` 表示在 X 轴上的平移距离。
- `ty` 表示在 Y 轴上的平移距离。
示例：
```css
/* 将元素在 X 轴上向右移动 20px，在 Y 轴上向下移动 30px */
.transform-example {
  transform: translate(20px, 30px);
}
```
应用示例：
```html
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <style>
    .transform-example {
      width: 100px;
      height: 100px;
      background-color: #3498db;
      /* 初始位置 */
      transform: translate(0, 0);
      transition: transform 0.3s ease;
    }
    .transform-example:hover {
      /* 鼠标悬停时的位置 */
      transform: translate(20px, 20px);
    }
  </style>
</head>
<body>
  <div class="transform-example"></div>
</body>
</html>transition用法搭配
```
在这个例子中，当鼠标悬停在元素上时，元素将在 X 轴和 Y 轴上分别向右和向下移动 20px。这是通过使用 `:hover` 伪类和 `transform` 属性结合使用的一个简单的动画效果。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。