掌握 CSS 倾斜函数

CSS 的倾斜函数有 skewX() 、skewY() 和 skew() ，用于实现元素的倾斜变换。

skewX()

沿水平方向倾斜元素。

CSS 函数 skewX() 用于定义在二维平面上沿水平方向倾斜元素的变换

该变换属于剪切映射 ，通过水平方向的特定角度使元素内各点产生形变。每个点的横坐标（水平 x 坐标）将根据指定角度和到原点的距离按比例调整：距离原点越远的点，其横坐标的偏移量越大。

剪切映射 是线性变换的一种，通过定向扭曲改变图形的几何形状，保持图形面积不变但角度发生变化。

css 复制代码

skewX(a)

a ，表示元素沿横坐标（x 轴）扭曲的角度。

下面为具体的例子：

html 复制代码

<div class="card">
  <div class="box skewX">
    <div class="fill"></div>
  </div>
  <p>skewX(45deg)</p>
</div>

css 复制代码

*, *:after, *:before {
  box-sizing: border-box;
}
body {
  background: #F5F3F4;
  margin-top: 100px;
  padding: 10px;
  font-family: 'Open Sans', sans-serif;
  text-align: center;
}
.card {
  display: inline-block;
  margin: 10px;
  background: #fff;
  padding: 15px;
  min-width: 200px;
  box-shadow: 0 3px 5px #ddd;
  color: #555;
}
.card .box {
  width: 100px;
  height: 100px;
  margin: auto;
  background: #ddd;
  cursor: pointer;
  box-shadow: 0 0 5px #ccc inset;
}
.card .box .fill {
  width: 100px;
  height: 100px;
  position: relative;
  background: #03A9F4;
  opacity: .5;
  box-shadow: 0 0 5px #ccc;
  -webkit-transition: 0.3s;
  transition: 0.3s;
}
.card p {
  margin: 25px 0 0;
}
.skewX:hover .fill {
  -webkit-transform: skewX(45deg);
  transform: skewX(45deg);
}

更多可见 skewX()

skewY()

沿垂直方向倾斜元素

CSS 函数 skewY() 用于定义在二维平面内沿垂直方向（y 轴）倾斜元素的变换操作

该变换属于剪切映射，通过指定角度使元素内各点沿垂直方向产生形变。每个点的纵坐标（垂直方向 y 坐标）将根据倾斜角度和到原点的距离按比例偏移：距离原点越远的点，其纵坐标的偏移量越大。

css 复制代码

skewY(a)

a ，表示元素沿纵坐标（y 轴）扭曲的角度。

下面为具体的例子：

html 复制代码

<div class="card">
  <div class="box skewY">
    <div class="fill"></div>
  </div>
  <p>skewY(45deg)</p>
</div>

css 复制代码

*, *:after, *:before {
  box-sizing: border-box;
}
body {
  background: #F5F3F4;
  margin-top: 100px;
  padding: 10px;
  font-family: 'Open Sans', sans-serif;
  text-align: center;
}
.card {
  display: inline-block;
  margin: 10px;
  background: #fff;
  padding: 15px;
  min-width: 200px;
  box-shadow: 0 3px 5px #ddd;
  color: #555;
}
.card .box {
  width: 100px;
  height: 100px;
  margin: auto;
  background: #ddd;
  cursor: pointer;
  box-shadow: 0 0 5px #ccc inset;
}
.card .box .fill {
  width: 100px;
  height: 100px;
  position: relative;
  background: #03A9F4;
  opacity: .5;
  box-shadow: 0 0 5px #ccc;
  -webkit-transition: 0.3s;
  transition: 0.3s;
}
.card p {
  margin: 25px 0 0;
}
.skewY:hover .fill {
  -webkit-transform: skewY(45deg);
  transform: skewY(45deg);
}

更多可见 skewY()

skew()

在 2D 平面上倾斜元素。

CSS 函数 skew() 定义了一个元素在二维平面上的倾斜变换。

该变换属于剪切映射，通过指定的水平与垂直角度使元素内各点产生双向形变。其视觉效果类似于抓住元素的四个角并按特定角度拉伸。

各点的坐标将根据其到原点的距离和指定角度按比例调整。因此，点离原点越远，其坐标偏移量越大。

skew() 函数可通过一个或两个参数指定，分别表示元素在 x 轴和 y 轴方向的倾斜量。若仅提供一个参数，则仅作用于 y 轴方向（y 轴不产生倾斜）。

css 复制代码

skew(ax)

skew(ax, ay)

ax，元素沿 x 轴的倾斜角度。
ay，元素沿 y 轴的倾斜角度。若未定义，则默认值为 0，此时仅产生水平方向的倾斜效果。

下面为具体的例子：

html 复制代码

<div class="card">
  <div class="box skew">
    <div class="fill"></div>
  </div>
  <p>skew(30deg, 60deg)</p>
</div>

css 复制代码

*, *:after, *:before {
  box-sizing: border-box;
}
body {
  background: #F5F3F4;
  margin-top: 100px;
  padding: 10px;
  font-family: 'Open Sans', sans-serif;
  text-align: center;
}
.card {
  display: inline-block;
  margin: 10px;
  background: #fff;
  padding: 15px;
  min-width: 200px;
  box-shadow: 0 3px 5px #ddd;
  color: #555;
}
.card .box {
  width: 100px;
  height: 100px;
  margin: auto;
  background: #ddd;
  cursor: pointer;
  box-shadow: 0 0 5px #ccc inset;
}
.card .box .fill {
  width: 100px;
  height: 100px;
  position: relative;
  background: #03A9F4;
  opacity: .5;
  box-shadow: 0 0 5px #ccc;
  -webkit-transition: 0.3s;
  transition: 0.3s;
}
.card p {
  margin: 25px 0 0;
}
.skew:hover .fill {
  -webkit-transform: skew(50deg, 60deg);
  transform: skew(50deg, 60deg);
}

更多可见 skew()

总结

CSS 倾斜函数 skewX()、skewY() 和 skew() 通过剪切映射实现元素在 2D 平面内的水平/垂直倾斜变换。