CSS 函数 - skew()

CSS 函数skew()指定一个在二维平面上倾斜元素的变换，生成<transform-function>数据类型。

可能的值

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

这种变换，称为剪切映射或平移，会在水平和垂直方向上同时倾斜元素内的点。
它模拟了通过指定角度拖动元素每个角的效果。点的坐标根据指定的角度和距原点的距离进行调整，距离越远的点受影响越大。

语法

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

skew(ax)
skew(ax, ay)

Explore our latest online courses and learn new skills at your own pace. Enroll and become a certified expert to boost your career.

CSS skew() - 仅 X 轴

以下示例演示了skew()仅在一个轴上倾斜的使用方法

Open Compiler

<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">This is div element showing Skew</div>
      <div class="normal-demo">This is a div element showing Normal</div>
   </div>
</body>
</html>

CSS skew() - 两个轴

以下示例演示了skew()在两个轴上同时倾斜的使用方法

Open Compiler

<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>This is an example of skewing on both axes.</p>
</div>
</body>
</html>

打印页面