caa-线性渐变，过渡，2d变换

线性渐变
/* linear-gradien 渐变函数 */
/* 红色的渐变到蓝色 从上往下渐变 */
/* background-image: linear-gradient(red,blue,yellow); */
/* 指定方向 然后渐变 */
/* background-image: linear-gradient(to left bottom,red,blue); */
/* background-image: linear-gradient(80deg,red,blue); */
/* 前面300个像素是纯红色 然后从300以后才开始慢慢的渐变成蓝色 */
/* background-image: linear-gradient(to right,red 300px,blue); */
/* 前面300个像素是纯红色 然后从300以后才开始慢慢的渐变成蓝色 渐变到400个像素的地方结束 后面全部是蓝色*/
/* background-image: linear-gradient(to right,red 300px,blue 400px); */
/* background-image: linear-gradient(to right,red 300px,blue 300px,yellow 300px); */

径向渐变 用的不多
/* background-image: radial-gradient(300px 100px,red,blue); */
重复渐变，表示的意思是 红色从0开始渐变到蓝色100个像素的地方 然后后面重复
/*background-image:repeating-linear-gradient(to right,red 0,red 50px,blue 50px,blue 100px);*/

过渡
指定哪些属性需要过渡
/* transition-property:left,top,font-size,color,background-color; */
全部属性一起过渡
transition-property: all;
过渡的时间 单位是s
transition-duration: 2s;
过渡的延迟
/* transition-delay: 4s; */
过渡的速度 ease 慢慢加速然后减速 linear 匀速的 steps 步长
/* transition-timing-function:steps(4); */
过渡的简写 属性 过渡时间 延迟时间 速度
transition:all 4s 1s linear;

2d变换-平移
平移 不会脱离文档流 百分比是按照自己本身的宽高来的
translateX 水平平移
/* transform:translateX(50%); */
translateY 垂直平移
/* transform: translateY(100px); */
两个方向都要移动（translate(X轴,Y轴)）
transform: translate(100px,200px);（ transform:translateX(100px) translateY(100px); ）

2d变换-旋转
rotateX 沿着X轴旋转 rotateY(45deg) 沿着Y轴旋转 deg度
/* transform:rotateY(45deg); */
  沿着z轴进行旋转
/* transform:rotateZ(45deg); */

2d变换-缩放
      /* 水平方向放大 值1表示原本大小 ；0就是没有； 小于1是缩小 ；大于1就是放大*/
/* transform: scaleX(1.8); */
/* 垂直方向放大 */
/* transform: scaleY(1.8); */
/* 垂直和水平方向全部放大 */
      /*transform: scale(1.8);*/

2d变换-倾斜
transform: skewY(20deg);