css样式transform

`transform` 和 `transition` 是 CSS 中用于实现动画效果的两个属性。

1. `transform` 属性：`transform` 属性用于对元素进行变换，可以实现平移、缩放、旋转和倾斜等效果。常见的值包括 `translate()`, `scale()`, `rotate()` 和 `skew()`。例如：

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

上述代码将使具有 `.box` 类的元素在水平方向上平移 50 像素，垂直方向上平移 50 像素，并绕中心点顺时针旋转 45 度。

2. `transition` 属性：`transition` 属性用于设置元素的过渡效果，即当元素的某个属性发生变化时，如何平滑地过渡到新的状态。常见的属性包括 `transition-property`, `transition-duration`, `transition-timing-function` 和 `transition-delay`。例如：

.box {
  transition: width 0.5s ease-in-out;
}

.box:hover {
  width: 200px;
}

上述代码将使具有 `.box` 类的元素在鼠标悬停时，宽度从原来