前端

CSS 转换属性 (`transform`) 主要用于在不改变文档流的基础上对元素进行移动、旋转、缩放和倾斜等操作。这可以增强视觉效果和用户界面的交互性。

### 用途举例

1. **移动 (Translate)**
   使用 `translate` 函数可以移动元素的位置。比如，将一个按钮向右移动50像素，向下移动30像素：
   ```css
   .button {
       transform: translate(50px, 30px);
   }
   ```

2. **旋转 (Rotate)**
   通过 `rotate` 函数可以使元素按照给定的角度进行旋转。例如，将一个图标旋转45度：
   ```css
   .icon {
       transform: rotate(45deg);
   }
   ```

3. **缩放 (Scale)**
   `scale` 函数用于改变元素的大小。例如，将一个图片放大1.5倍：
   ```css
   .image {
       transform: scale(1.5);
   }
   ```

4. **倾斜 (Skew)**
   通过 `skew` 函数，可以将元素沿X轴或Y轴倾斜。例如，将一个文本元素沿X轴倾斜30度：
   ```css
   .text {
       transform: skewX(30deg);
   }
   ```

这些转换可以单独使用也可以组合使用，为网页添加动态效果和创新的视觉布局。

CSS转换属性的作用是什么？举例说明它的用法。

用途举例