CSS 函数 - skewX()

CSS 函数 `skewX()` 指定了一种变换，它在二维平面上水平倾斜元素，产生 `<transform-function>` 数据类型。

可能的值

a - 指的是一个 `<angle>`，它指定用于沿水平轴 (x 坐标) 扭曲元素的角度。

这种变换，称为剪切映射或推移，通过水平方向上的角度来扭曲元素内的点。
它根据指定角度和距原点的距离改变每个点的水平位置，距原点越远的点受影响越大。

注意：`skewX(a)` 等同于 `skew(a)`。

语法

skewX(a)

CSS skewX() - 基本示例

以下示例演示了 `skewX()` 的用法。

<html>
<head>
<style>
   .skew-demo {
      transform: skewX(30deg);
      background-color: #4CAF50;
      color: white;
      padding: 20px;
      margin-bottom: 20px;
      text-align: center;
   }
   .normal-demo {
      background-color: #f44336;
      color: white;
      padding: 20px;
      text-align: center;
   }
</style>
</head>
<body>
<h2>skewX and normal</h2>
   <div class="skew-demo">This is a skewed div element.</div>
   <div class="normal-demo">This is a normal div element.</div>
</body>
</html>

打印页面