css中transform
时间: 2023-06-28 10:12:24 浏览: 103
CSS3中transform属性的详解.pdf
transform 是 CSS 的一个属性,用于对元素进行变换操作,常用的变换包括平移、缩放、旋转、倾斜等。transform 属性可以单独使用,也可以与其他 CSS 属性一起使用,例如 transition、animation 等。
transform 属性的常见取值包括:
1. translate:用于对元素进行平移操作,可以设置水平和垂直方向的偏移量。
2. scale:用于对元素进行缩放操作,可以设置水平和垂直方向的缩放比例。
3. rotate:用于对元素进行旋转操作,可以设置旋转的角度。
4. skew:用于对元素进行倾斜操作,可以设置水平和垂直方向的倾斜角度。
5. matrix:用于对元素进行复合变换,可以设置多个变换参数。
例如:
```
transform: translate(10px, 20px);
transform: scale(0.8, 0.8);
transform: rotate(45deg);
transform: skew(10deg, 20deg);
transform: matrix(1, 0.5, -0.5, 1, 0, 0);
```
这些属性可以组合使用,实现更多复杂的变换效果。例如:
```
transform: translate(10px, 20px) rotate(45deg) scale(0.8, 0.8);
```
以上代码实现了先平移、再旋转、最后缩放的效果。
阅读全文