tranform变换（html）

transform变换方式： (旋转，缩放，位移，变形)

transform作用于：rotate函数，scale函数，translate函数，skew函数 (旋转，缩放，位移，变形)

1：rotate函数（旋转）（单位：deg ）：

 写法： transform: rotateZ(-45deg);

1：默认值是z轴：可以想象鸟的视角

2：x轴转动：可以想象成一个人站在你的屏幕前后空翻动作

3：y轴转动：可以想象成一个人站在你的屏幕前转身动作

2.scale函数（缩放）

写法：  transform: scaleX(0.5)（缩小0.5）;

             transform: scale(1.2)（放大1.2）;

3.translate函数（位移）

 以x轴和Y轴位移

写法：transform：translate（100px，-40px）

注意： transform: translate(50%)是向移动X轴，自身宽度的一半 。

4：skew函数

  以x轴和y轴形变

写法：  transform: skewX(10deg);

transform变换起点：

以左上角为原点 ：transform-origin: 0 0;
 以x轴0点为原点 ：transform-origin: 0;

注意：transform变换不会更改元素原文档流位置、大小，只是在视觉上发生了变换。