web知识

取值:

- px

- 百分比（强调相对于元素本身计算）

- 说明：允许负值，正值默认向右向下，负值向左向上

> 水平向右为正值，垂直方向向下正值

```css

/* 沿着水平方向位移 */

当为一个值的时候，只沿着水平方向位移

transform: translate(50px);

```

#### 2) transform: rotate(ndeg) 旋转

* 语法

* transform：rotate(deg);沿着中心点旋转，默认值

*  transform: rotateX(deg);沿着X轴旋转

* transform: rotateY(deg);沿着Y轴旋转

​        单位：deg

​        当角度值为正数时，元素沿着顺时针方向旋转

​        当角度值为负数时，元素沿着逆时针方向旋转

 

transform: scale() 缩放

- transform: scale(x,y) 沿着x轴和y轴缩放

- transform: scaleX(x) 沿着x轴缩放

- transform: scaleY(y) 沿着y轴缩放

> 取值范围0~1之间表示缩小，1表示正常大小，1以上表示放大，默认值为1

> 取值为负值表示先翻转后缩放

>

> 为一个值的时候，沿着水平方向和垂直方向等比例缩放

```html

transform: scale(1.5);/* 沿着水平方向和垂直方向都放大1.5倍，等比例缩放 */

transform: scale(-1.5);/* 先翻转，然后 沿着水平方向和垂直方向都放大1.5倍 */

```

#### 4）transform: skew() 倾斜

- transform: skew(x,y) 沿着x轴和y轴倾斜

- transform: skewX(x) 沿着x轴倾斜

- transform: skewY(y) 沿着y轴倾斜

> 单位deg(角度)

> 正值，向左上角和右下角倾斜；负值，向右上角和左下角倾斜

>

> 为一个值的时候，只沿着水平方向倾斜

```html

  /* 为一个值的时候，只沿着水平方向位移 */

        .box1:hover {

            transform: skew(45deg);

        }

 /* skew(30deg,45deg) 围绕 X 轴把元素翻转 30 度，围绕 Y 轴翻转 45 度 */

        .box2:hover {

            background-color: tomato;

            transform: skew(30deg, 45deg);

        }

        .box3:hover {

            transform: skewX(-45deg);

        }

        .box4:hover {

            transform: skewY(45deg);

        }

        .box5:hover {

            transform: skewY(-45deg);

        }

```

#### 5）transform-origin属性 设置元素的基点位置

* transform-origin: 水平方向 垂直方向;

*  设置元素的基点位置，设置围绕哪个点进行变化

* 取值

​    百分比

​    px

   关键字

​       水平：left center right

​       垂直：top  center bottom

- 说明：

  两个空格隔开的值，分别表示x,y轴的原点

  一个值时，另一个值默认center

- 可为负数

> 必须与transform属性配合使用

 

旋转，位移，缩放，倾斜的复合写法