⑨CSS-transform&transition

        transform和transition是CSS中的两个常用属性，用于实现元素的动画和变形效果

1.transform

        用于对元素进行变形操作，包括旋转、缩放、平移和倾斜等

transform 属性值
translate()	平移元素，可以指定水平和垂直方向上的偏移量。例如：translate(10px, 20px)
scale()	缩放元素，可以指定水平和垂直方向上的缩放比例。例如：scale(1.5, 0.8)
rotate()	旋转元素，可以指定旋转的角度。例如：rotate(45deg)
skew()	倾斜元素，可以指定水平和垂直方向上的倾斜角度。例如：skew(10deg, -20deg)

.box {
  transform: translate(50px, 50px) rotate(45deg) scale(1.5);
}

2.transition

        定义元素的过渡效果，即从一个状态平滑地过渡到另一个状态，需要指定过渡的属性、持续时间和过渡的方式。

下面是将常用的transition属性值放入表格的示例：

transition 属性值
transition-property	指定过渡的属性，可以是单个属性或多个属性。例如：transition-property: width; 或 transition-property: width, height;
transition-duration	指定过渡的持续时间，可以使用秒(s)或毫秒(ms)作为单位。例如：transition-duration: 0.5s;
transition-timing-function	指定过渡的方式，如线性过渡、缓入缓出等。例如：transition-timing-function: ease-in-out;
transition-delay	指定过渡的延迟时间，即过渡开始之前的等待时间。例如：transition-delay: 0.2s;

.box {
  transition: width 0.3s ease-in-out;
}
.box:hover {
  width: 200px;
}