持续创作，加速成长！这是我参与「掘金日新计划 · 10 月更文挑战」的第1天
2D转换
先说说2D转换吧，2D转换是通过该变内容的移动，旋转，缩放，来达到在2D平面上变化的目的。
2D转换之移动： transform:translate(x,y);
单位：px,%(百分比参考的是自身)
x:正值向右,负值向左
y:正值向下,负值向上
注意：只写一个值的话，是表示在X轴方向上的移动。
transform:translateX(x);
只在x轴移动
transform:translateY(y);
只在y轴移动
注意： transform:translate();不脱标保留自己的位置。
2D转换之旋转：transform：rotate(旋转度数);
单位：deg 旋转度数为正值，顺时针，为负数，逆时针。
2D转换之缩放：transform：scale(倍数);
值： （1）写一个值：宽高等比例缩放 （2）写两个值：第一个值是宽，第二个值是高
注意：值小于1，会缩小，值大于1，会放大。而且，scale会将盒子整体（包括内容）同比例缩放。
2D转换之转换中心点：transform-origin: x y ;
值： （1）方位名词（可以写两个，如：top left 就是左上角） （2）数值px （3）数值%（相对于自身）
2D转换连写
transform: translate() rotate() scale() ;
注意：（1）连写一定要注意顺序，顺序不一样，导致的结果也可能会发生变化。如果先写旋转，再写转移，旋转会改变物体轴向，就会导致转移的方向发生变化。 （2）2D转换只可以进行一次。动画可以进行多次
背景渐变
控制方向-方向名词： （1）自下而上
background-image：linear-gradient(to top，green，red);
（2）自上而下
background-image：linear-gradient(to bottom，green，red);
（3）自左而右
background-image：linear-gradient(to right，green，red);
（4）自右而左
background-image：linear-gradient(to left，green，red);
（3）自左下而右上
background-image：linear-gradient(to right top，green，red);
控制方向-度数：
background-image：linear-gradient(90deg，green，red);
注意：
(1）方向朝哪，里面的值就填那个方位名词
(2）括号里面用逗号隔开
(3)里面的颜色可以写多个，用逗号隔开
