CSS3变形
CSS3变形是一些效果的集合，如平移、旋转、缩放、倾斜效果，每个效果都可以称为变形（transform），它们可以分别操控元素发生平移、旋转、缩放、倾斜等变化
设置变形函数，★ 可以是一个，也可以是多个，中间以空格分开transform:[transform-function] ;
translate()：平移函数，基于X、Y坐标重新定位元素的位置
scale()：缩放函数，可以使任意元素对象尺寸发生变化
rotate()：旋转函数，取值是一个度数值
skew()：倾斜函数，取值是一个度数值
1、2D位移translate
translate(tx,ty);tx X轴（横坐标）移动的向量长度，ty Y轴（横坐标）移动的向量长度
transform: translate(100px,20px);x轴向右移动100px y轴向下移动20px
transform: translate(30px,0);或 transform: translateX(30px); x轴向右移动30px，y轴不移动
transform: translateX(-30px);x轴向左移动30px 可以接受负值
transform: translate(0,50px);或transform: translateY(50px);x轴不移动，y轴向下移动50px
2、2D缩放scale
scaleX(sx)：表示只设置X轴的缩放，scaleY(sy)：表示只设置Y轴的缩放
scale(1,1) 表示宽高不放大也不缩小
scale(2,2) 表示宽高放大两倍
scale(.5,.5) 表示宽高缩小一倍
scale(1,.5) 表示宽度不放大也不缩小 高度缩小了一倍
scale(2,.5) 宽度由200变成了400放大了两倍 高度缩小了一倍
scale(2) 宽和高都放大了两倍
transform: scaleX(2) 等同于transform:scale(2,1)宽度放大两倍 高度不变
3、2D倾斜skewY
skewX（ax）：表示只设置X轴的倾斜，skewY（ay）：表示只设置Y轴的倾斜
transform: skewX(30deg);等同于transform: skew(30deg,0deg)x轴向左倾斜30度 y轴不变
transform: skewY(60deg);等同于transform: skew(0deg,60deg)x轴不变 y轴向下倾斜60度
🔺skew只设置一个值表示x轴向左倾斜30度，transform: skew(30deg);
4、2D旋转 rotate
rotate(a)参数a单位使用deg表示，参数a取正值时元素相对原来中心顺时针旋转
transform: rotate(30deg);绕着中心点 向右旋转30度
transform: rotate(-30deg);绕着中心点 向左旋转30度
总结： 🔺rotate旋转和skew倾斜的区别
rotate( )函数只是旋转，而不会改变元素的形状
skew( )函数是倾斜，元素不会旋转，会改变元素的形状
