CSS 数据类型

CSS 函数 skewX() 指定在 2D 平面上水平倾斜元素的转换，产生数据类型 <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 和 normal</h2>
   <div class="skew-demo">这是一个倾斜的 div 元素。</div>
   <div class="normal-demo">这是一个普通的 div 元素。</div>
</body>
</html>