CSS中transform变形和transition(过渡)讲解

css中的2D变形（transform)总共有四种方法

【1】.translate(X轴位移，Y轴位移)
如果只填写了 translate(50)那么就是X轴移动了50像素

2.translateX(x轴位移) translateY(y轴平移）
这样就是只进行X轴的平移 这样就是只进行Y轴的平移

【2】scale() 这是transform的缩放
scale(宽，高)
参数1是设置缩放的宽度，参数2是设置缩放的高度
如果是这样

【3】scale(1,1.5)缩放对应的倍数
如果只给一个数字，默认X和Y都按照该比例缩放

【4】rotate() 旋转

【注意】单位是度（deg) ,旋转是变形中唯一只有一个单位的，因为这就是平面进行操作

【千万记住！！】

transform对每一个元素都只能有一个，如果你要更多，就空格即可

如果直接使用变形（transform）会让人感觉特别干巴，突兀，所以我们最好结合过渡（transition)来解决

transition: all linear 2s 用这段代码举例
参数1： all针对所有动画都进行过渡
参数2：linear 过渡执行方式 匀速执行
参数3： 执行时间

过渡的动画函数
ease:速度由块到慢（默认值）
linear:速度恒速（匀速运动）
ease-in:速度越来越快（渐显效果）
ease-out:速度越来越慢（渐隐效果）
ease-in-out:速度先加速再减速（渐显渐隐效果）