web前端10--变化
-transform
`transform`：允许你通过改变元素的位置、旋转、缩放或倾斜来操作元素。
1、rotate()
`rotate()`函数旋转元素。
语法：`rotate(angle)`，其中`angle`表示旋转的角度。
```css
.element {
transform: rotate(45deg);
}
```2、scale()
`scale()`函数缩放元素的大小。
语法：`scale(x, y)`，其中`x`和`y`分别表示水平和垂直方向上的缩放比例。
```css
.element {
transform: scale(1.5);
transform: scale(1.3,5);
/* 宽 高 */
}
```3、translate()
`translate()`函数移动元素的位置。
语法：`translate(x, y)`，其中`x`和`y`分别表示水平和垂直方向上的位移。如果只提供一个值，它将被用作水平方向上的位移，而垂直方向上的位移将被设为0。
```
transform: translate(60px,80px);
transform: translateX(60px);
transform: translateY(80px);
```
```css
/* 在水平方向上向右平移自身宽度的50%，在垂直方向上向下平移自身高度的20%。 */
.element {
transform: translate(50%, 20%);
}4、skew()
`skew()`函数使元素倾斜。、
语法：`skew(x, y)`，其中`x`和`y`分别表示水平和垂直方向上的倾斜角度。
transform: skew(20deg,60deg);
5、transform-origin
`transform-origin`属性在 CSS 中用于设置元素进行转换时的原点位置。
默认原点(中心点)
```CSS
.element {
transform: rotate(45deg);
transform-origin: center; /* 默认是 center center */
}
```