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 */
}
```

左上角原点
transform-origin: top left;
transform-origin: top center;

自定义原点
transform-origin:25% 75%;
transform-origin:25px 65px;