CSS3 平面转换

CSS3 的 transform 属性允许对元素进行 2D 或 3D 变换，以下是常见的 2D（平面）转换方法：

平移（Translate）

通过 translate(x, y) 将元素沿 X 轴和 Y 轴移动：

div {
  transform: translate(50px, 20px); /* 向右移动50px，向下移动20px */
}

旋转（Rotate）

通过 rotate(angle) 旋转元素，单位为 deg（度）：

div {
  transform: rotate(30deg); /* 顺时针旋转30度 */
}

缩放（Scale）

通过 scale(x, y) 调整元素尺寸：

div {
  transform: scale(1.5, 0.8); /* 宽度放大1.5倍，高度缩小为0.8倍 */
}

倾斜（Skew）

通过 skew(x-angle, y-angle) 使元素倾斜：

div {
  transform: skew(20deg, 10deg); /* X轴倾斜20度，Y轴倾斜10度 */
}

多重变换

多个变换可以组合使用，用空格分隔：

div {
  transform: translate(50px, 0) rotate(45deg) scale(1.2);
}

---

CSS3 渐变

CSS3 渐变用于创建平滑过渡的颜色效果，主要分为线性渐变和径向渐变。

线性渐变（Linear Gradient）

通过 linear-gradient() 定义沿直线的颜色过渡：

div {
  background: linear-gradient(to right, red, yellow, blue);
}

• 方向参数：to right（从左到右）、to bottom（从上到下），或角度如 90deg。
• 颜色参数：可定义多个颜色及位置，例如 red 0%, yellow 50%, blue 100%。

径向渐变（Radial Gradient）

通过 radial-gradient() 从中心点向外扩散颜色：

div {
  background: radial-gradient(circle, red, yellow, green);
}

• 形状参数：circle（圆形）或 ellipse（椭圆形）。
• 可指定中心位置，如 at center 或 at 20% 30%。

重复渐变

使用 repeating-linear-gradient 或 repeating-radial-gradient 实现重复渐变效果：

div {
  background: repeating-linear-gradient(45deg, red 0px, red 10px, blue 10px, blue 20px);
}

透明渐变

结合 rgba() 实现透明度过渡：

div {
  background: linear-gradient(to bottom, rgba(255,0,0,0.8), rgba(0,0,255,0.2));
}

案例1

/* TODO 5. 播放按钮和遮罩 */
.album-item .album-item-box::after {
  position: absolute;
  left: 0;
  top: 0;
  content: '';
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,.5) url(../assets/play.png) no-repeat center / 20px;
  opacity: 0;
  transition: all .5s;
}

.album-item .album-item-box:hover::after {
  opacity: 1;
  background-size: 50px;
}


/* TODO 6. 图片缩放 */
.album-item .album-item-box:hover img {
  transform: scale(1.1);
}

案例2：下拉框

.x-header-nav .nav-item .icon-down {
  display: inline-block;
  height: 16px;
  color: #ccc;
  transition: all 0.5s;
}

.x-header-nav .nav-item:hover .icon-down {
  transform: rotate(-180deg);
}
channel-layer {
  position: absolute;
  top: 60px;
  left: 50%;
  z-index: -2;
  width: 1080px;
  height: 120px;
  padding: 10px;
  margin-left: -540px;
  color: #72727b;
  background-color: #f5f5f5;
  border: 1px solid #e4e4e4;
  border-top: none;
  transition: all 0.5s;
  transform: translateY(-120px);
}

/* TODO 2. 弹窗频道 */
.x-header-nav .nav-item:hover .channel-layer {
  transform: translateY(0);
}