skewX() - X轴倾斜

语法说明

transform: skewX(angle);

• angle - X 轴倾斜角度
• 正值：顶部向左偏移，底部向右偏移（形成 \ 形状）
• 负值：顶部向右偏移，底部向左偏移（形成 / 形状）
• 等价于 skew(angle, 0)

示例 1：正值倾斜（\）

skewX(30deg) 顶部向左，底部向右，形成 \ 形状

.box {
  transform: skewX(30deg);
  /* 顶部向左，底部向右 */
}

示例 2：负值倾斜（/）

skewX(-30deg) 顶部向右，底部向左，形成 / 形状

.box {
  transform: skewX(-30deg);
  /* 顶部向右，底部向左 */
}

示例 3：大角度倾斜

skewX(45deg) 创建更明显的倾斜效果

.box {
  transform: skewX(45deg);
}