CSS 平面转换 渐变

CSS 平面转换主要是通过 transform 属性来实现的，而渐变则是通过 background 属性的 -gradient 函数来实现的。以下是一些实例代码：

1. 2D平面旋转转换:

.box {
  width: 100px;
  height: 100px;
  background: #333;
  transform: rotate(45deg);
}

2. 2D平面缩放转换:

.box {
  width: 100px;
  height: 100px;
  background: #333;
  transform: scale(1.5, 0.5);
}

3. 2D平面倾斜转换:

.box {
  width: 100px;
  height: 100px;
  background: #333;
  transform: skew(30deg, 20deg);
}

4. 线性渐变背景:

.box {
  width: 100px;
  height: 100px;
  background: linear-gradient(to right, #ff33cc, #ffcc33);
}

5. 径向渐变背景:

.box {
  width: 100px;
  height: 100px;
  background: radial-gradient(circle, #ff33cc, #ffcc33);
}

6. 结合平面转换和线性渐变:

.box {
  width: 100px;
  height: 100px;
  background: linear-gradient(to right, #ff33cc, #ffcc33);
  transform: rotate(45deg);
}

这些例子展示了如何使用CSS的 transform 和 background 属性来创建平面转换和渐变效果。你可以根据需要组合不同的转换和渐变类型来达到你想要的视觉效果。