文章目录

1. 1. transform属性
   1. 1.1. 一、移动 translate
   2. 1.2. 二、缩放 scale
   3. 1.3. 三、旋转 rotate
   4. 1.4. 四、倾斜 skew
2. 2. 旋转举例

transform属性

一、移动 translate

用法：transform: translate(45px) 或者 transform: translate(45px, 150px);

参数表示移动距离，单位px，

一个参数时：表示水平方向的移动距离；
两个参数时：第一个参数表示水平方向的移动距离，第二个参数表示垂直方向的移动距离。

二、缩放 scale

用法：transform: scale(0.5) 或者 transform: scale(0.5, 2);

参数表示缩放倍数；

一个参数时：表示水平和垂直同时缩放该倍率
两个参数时：第一个参数指定水平方向的缩放倍率，第二个参数指定垂直方向的缩放倍率。

三、旋转 rotate

用法：transform: rotate(45deg);

围绕旋转中心旋转而不变形的转换，rotate()默认旋转中心为图片的中点。共一个参数“角度”，单位deg为度的意思，正数为顺时针旋转，负数为逆时针旋转，上述代码作用是顺时针旋转45度。

四、倾斜 skew

用法：transform: skew(30deg) 或者 transform: skew(30deg, 30deg);

参数表示倾斜角度，单位deg

一个参数时：表示水平方向的倾斜角度；

两个参数时：第一个参数表示水平方向的倾斜角度，第二个参数表示垂直方向的倾斜角度。

旋转举例

进行旋转时其对应的坐标系会跟随旋转的角度进行变化。

1.transform:rotateY(90deg) translateZ(200px) ;
该操作会将一个div正向旋转90度，（旋转的角度是根据Y轴的垂直面（x向右，y向上，二维）
原来的xyz轴也进行正向旋转90度，
因此，Z轴的正向会变成向右的方向，

黑色的x,y轴是旋转角度面

2. transform:rotateY(90deg) translateZ(200px) rotateZ(45deg);
该操作会在原来的基础上绕Z轴进行旋转

黑色的x,y轴是旋转角度面