transform有哪些属性常见的 transform 函数： translate(x, y) 用于平移元素。可以接受两

translate(x, y)
- 用于平移元素。可以接受两个参数，分别是水平方向 (x) 和垂直方向 (y) 的偏移量。
- 示例：
```
css
复制代码
transform: translate(50px, 100px);
```

translateX(x) / translateY(y)

示例：

css
复制代码
transform: translateX(50px);  /* 仅沿水平方向移动 */
transform: translateY(100px); /* 仅沿垂直方向移动 */

scale(x, y)
- 缩放元素，x 和 y 代表水平和垂直方向的缩放比例。默认情况下，scale(1, 1) 代表没有缩放。
- 示例：
```
css
复制代码
transform: scale(1.5, 1.5); /* 水平和垂直都放大 1.5 倍 */
```

scaleX(x) / scaleY(y)

示例：

css
复制代码
transform: scaleX(1.5);  /* 水平方向缩放 */
transform: scaleY(0.5);  /* 垂直方向缩小 */

rotate(deg)
- 旋转元素，deg 表示旋转的角度。正值为顺时针，负值为逆时针。
- 示例：
```
css
复制代码
transform: rotate(45deg); /* 顺时针旋转 45 度 */
```

rotateX(deg) / rotateY(deg) / rotateZ(deg)

示例：

css
复制代码
transform: rotateX(45deg); /* 绕 X 轴旋转 45 度 */
transform: rotateY(30deg); /* 绕 Y 轴旋转 30 度 */
transform: rotateZ(60deg); /* 绕 Z 轴旋转 60 度 */

skewX(deg) / skewY(deg)

示例：

css
复制代码
transform: skewX(20deg); /* 沿 X 轴倾斜 20 度 */
transform: skewY(30deg); /* 沿 Y 轴倾斜 30 度 */

skew(degX, degY)

示例：

css
复制代码
transform: skew(20deg, 30deg); /* X 轴倾斜 20 度，Y 轴倾斜 30 度 */

matrix(a, b, c, d, tx, ty)
- 进行 2D 变换的矩阵，使用 6 个值：a, b, c, d 是缩放、旋转、倾斜等变换的参数，tx, ty 是平移的值。这个方法非常强大，但也比较难以理解和使用。
- 示例：
```
css
复制代码
transform: matrix(1, 0, 0, 1, 50, 100);
```

你可以将多个变换函数链式组合在一起，按顺序应用：

css
复制代码
transform: translate(50px, 100px) rotate(45deg) scale(1.5);

上面的例子会先平移元素 50px 在水平方向上，100px 在垂直方向上，然后旋转 45 度，最后将元素缩放 1.5 倍。

除了 2D 变换，transform 还支持 3D 变换，常见的包括：

perspective(n)
- 设置 3D 变换的视距。这个属性影响子元素的 3D 变换效果。
- 示例：
```
css
复制代码
transform: perspective(500px);
```
rotateX(deg) / rotateY(deg) / rotateZ(deg) (3D)
- 类似于 2D 变换，但会应用到 3D 空间中。
- 示例：
```
css
复制代码
transform: rotateX(30deg);
transform: rotateY(45deg);
```

translateZ(n)

示例：

css
复制代码
transform: translateZ(200px); /* 沿 Z 轴移动 200px */

scaleZ(n)

示例：

css
复制代码
transform: scaleZ(1.5);

matrix3d()
- 用于 3D 变换的矩阵，可以同时设置平移、旋转、缩放、倾斜等变换。
- 示例：
```
css
复制代码
transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 50, 100, 0, 1);
```

顺序：多个 transform 函数会按顺序应用，因此它们的顺序会影响最终结果。例如，先缩放后旋转和先旋转后缩放效果不同。
transform-origin：通过 transform-origin 属性设置变换的原点。默认情况下，变换是围绕元素的中心进行的，但可以使用 transform-origin 来调整原点。

这些就是 transform 属性的常见用法。如果你有特定的需求或问题，欢迎继续提问！

transform有哪些属性