transform变形

transform变形函数笔记

transform变形函数一共有四种：分别是translate() rotate() skew() scale()

translate():是平移函数平移的方式X轴和Y轴。例如：translate(20px,30px) 第一个参数是X轴，第二个参数是Y轴，当然也可以只往一个方向平移:比如translateX(20px) 这样就是X轴上平移20px，translateY(20px) 这样就是沿Y轴平移20px。
下面我们来看下效果：

<div class="box"></div>

先看平移前

div{transform: translate(100px,100px);}

注意：网页的坐标轴和数学里的不一样，它的Y轴是下正上负，而且是以父元素的XY轴平移
然后单方向平移就不演示了；

rotate() :是旋转函数，它是以自身的X轴Y轴还有Z轴旋转:**rotate(50deg)**如果没在rotate后面加X或者Y的话它会默认是以Z轴旋转也就是这样：

transform:rotate(50deg);

不然如果是以X和Y轴为默认的话就会变成这样

transform:rotateX(50deg) rotateY(50deg);//演示默认为X和Y轴旋转

然后单轴旋转就不进行演示了也是和translate() 一样再括号前面加上X或者Y就可以了

skew() 是倾斜函数当没给它往哪个方向倾斜时，它会默认为往X轴倾斜单位是deg(度)

transform: skew(50deg);

然后我们演示Y轴倾斜

transform: skewY(50deg);

scale() 是变大函数里面的参数是多少倍，所以没有单位只需要填数字就可以了不过是以1为界限，比1小就是缩小，反之就是变大；

transform:scale(0.4);

transfrom:scale(2);

变大

上面这些就是这几个函数的运行原理;由于写css的时候经常忘记这些函数，所以这次就在这里做了个笔记；