CSS的高级特效

2D位移：translate

书写方式 transform:translate(tx,ty);

tx 表示【x轴(横坐标)移动的向量长度】

ty 表示【y轴(纵坐标)移动的向量长度】

2D缩放：scale

书写方式 transform: scale(1,1);

参照如下：

transform:scale(1,1)表示不放大也不缩小，正常的宽度和高度

transform:scale(2,2)表示宽度和高度都放大了两倍

transform:scale(.5,.5)表示宽度和高度都缩小一倍

★缩小和放大的时候都是从中心开始的

2D倾斜：skew

书写方式 transform: skew(30deg,0deg);

★度数使用deg单位
transform: skew(30deg,0deg);   表示x轴向左倾斜30度 ，y轴不变

或者可以写为 transform: skewX(30deg);

transform: skew(0deg,60deg); 表示 x轴不变 ， y轴向下倾斜60度

也可以写为 transform: skewY(60deg);

▲skew只设置一个值表示x轴向左倾斜30度

transform: skew(30deg);

2D旋转：rotate

transform: rotate(30deg);  表示绕着中心点 向右旋转30度

transform: rotate(-30deg); 表示绕着中心点 向左旋转30度

旋转rotate和倾斜skew的区别：

rotate只是旋转，而不会改变元素的形状

skew是倾斜，元素不会旋转，但是会改变元素的形状