CSS 数据类型

CSS 函数 skew() 指定在 2D 平面上倾斜元素的转换，从而产生数据类型 <transform-function>.

属性值

  • ax - 表示 <angle> 指定用于沿 x 轴倾斜元素的角度。

  • ay - 表示 <angle> 指定用于沿 y 轴扭曲元素的角度。如果未指定，则默认为 0 并导致纯粹的水平倾斜。

  • 这种变换称为剪切映射或横穿，使元素内的点在水平和垂直方向上倾斜。

  • 它模拟将元素的每个角拖动指定的角度。点的坐标根据指定的角度和与原点的距离进行调整，距离越远的点影响越大。

语法

skew() 函数可以有一个或两个值来确定水平和垂直方向上的倾斜程度。如果只指定一个值，则适用于 x 轴，而 y 轴不受影响。

skew(ax)
skew(ax, ay)

CSS skew(): 仅 X 轴

以下示例演示如何使用 skew() 仅在一个轴上倾斜:

<html>
<head>
<style>
   .container {
      display: flex;
      flex-direction: row;
      justify-content: space-between;
      align-items: center;
      margin: 50px;
   }
   .skew-demo {
      transform: skew(20deg);
      background-color: #FFC107;
      width: 200px;
      height: 200px;
      display: flex;
      justify-content: center;
      align-items: center;
      font-size: 24px;
      font-weight: bold;
      color: #fff;
   }
      .normal-demo {
      background-color: #2196F3;
      width: 200px;
      height: 200px;
      display: flex;
      justify-content: center;
      align-items: center;
      font-size: 24px;
      font-weight: bold;
      color: #fff;
   }
</style>
</head>
<body>
   <div class="container">
        <div class="skew-demo">这是显示倾斜的 div 元素</div>
     <div class="normal-demo">这是一个显示正常的 div 元素</div>
   </div>
</body>
</html>

CSS skew(): 两个轴

以下示例演示如何使用 skew() 在两个轴上倾斜轴

<html>
<head>
<style>
   .container {
   width: 200px;
   height: 200px;
   margin-top: 40px;
   margin-left: 40px;
   background-color: #DAF7A6;
   transform: skew(20deg, 10deg);
   }
</style>
</head>
<body>
   <div class="container">
   <p>这是两个轴上倾斜的示例。</p>
</div>
</body>
</html>