skew()

基线 广泛可用

此功能已相当成熟，并且在许多设备和浏览器版本上都能正常工作。它从 2015 年 9 月.

报告反馈

尝试一下

skew() CSS 函数 定义了一种在二维平面上倾斜元素的变换。其结果是 <transform-function> 数据类型。

这种变换是一种剪切映射 (平移)，它通过水平和垂直方向上的特定角度扭曲元素内的每个点。效果就像你抓住元素的每个角并沿特定角度拉动它们一样。

语法

每个点的坐标通过与指定角度和到原点的距离成比例的值进行修改。因此，点离原点越远，添加到它的值就越大。

skew() 函数使用一个或两个值来指定，这些值代表要应用于每个方向的倾斜量。如果只指定一个值，则该值用于 x 轴，y 轴不会倾斜。
skew(ax)

skew(ax, ay)

css

值

ax

是 <angle>，表示沿 x 轴扭曲元素时要使用的角度。

ay

是 <angle>，表示沿 y 轴扭曲元素时要使用的角度。如果未定义，其默认值为 0，导致纯水平倾斜。 笛卡尔坐标 在 ℝ^2 上 齐次坐标 在 ℝℙ^2 上 笛卡尔坐标在 ℝ^3 上
( 1 齐次坐标在 ℝℙ^3 上 ( 值 ) 齐次坐标在 ℝℙ^3 上 ( 是 <angle>，表示沿 x 轴扭曲元素时要使用的角度。 ) 1 ) tan ( 1 齐次坐标在 ℝℙ^3 上 ( 值 ) 0 齐次坐标在 ℝℙ^3 上 ( 是 <angle>，表示沿 x 轴扭曲元素时要使用的角度。 ) 1 0 0 0 1 ) \left( \begin{array}{cc} 1 & \tan(ax) \\ \tan(ay) & 1 \end{array} \right) ( 1 齐次坐标在 ℝℙ^3 上 ( 值 ) 0 齐次坐标在 ℝℙ^3 上 ( 是 <angle>，表示沿 x 轴扭曲元素时要使用的角度。 ) 1 0 0 0 1 ) \left( \begin{array}{cc} 1 & \tan(ax) \\ \tan(ay) & 1 \end{array} \right) ( 1 齐次坐标在 ℝℙ^3 上 ( 值 ) 0 0 齐次坐标在 ℝℙ^3 上 ( 是 <angle>，表示沿 x 轴扭曲元素时要使用的角度。 ) 1 0 0 0 0 1 0 0 0 0 1 ) \left( \begin{array}{cccc} 1 & \tan(ax) & 0 & 0 \\ \tan(ay) & 1 & 0 & 0 \\ 0 & 0 & 1 & 0 \\ 0 & 0 & 0 & 1 \end{array} \right)
[1 tan(ay) tan(ax) 1 0 0]

示例

仅在 x 轴上倾斜

HTML

html
<div>Normal</div>
<div class="skewed">Skewed</div>

CSS

skew() 函数使用一个或两个值来指定，这些值代表要应用于每个方向的倾斜量。如果只指定一个值，则该值用于 x 轴，y 轴不会倾斜。
body {
  margin: 20px;
}

div {
  width: 80px;
  height: 80px;
  background-color: skyblue;
}

.skewed {
  transform: skew(10deg); /* Equal to skewX(10deg) */
  background-color: pink;
}

结果

在两个轴上倾斜

HTML

html
<div>Normal</div>
<div class="skewed">Skewed</div>

CSS

skew() 函数使用一个或两个值来指定，这些值代表要应用于每个方向的倾斜量。如果只指定一个值，则该值用于 x 轴，y 轴不会倾斜。
body {
  margin: 20px;
}

div {
  width: 80px;
  height: 80px;
  background-color: skyblue;
}

.skewed {
  transform: skew(10deg, 10deg);
  background-color: pink;
}

结果

规范

规范
CSS 变换模块级别 1
# funcdef-transform-skew

浏览器兼容性

BCD 表格仅在浏览器中加载

另请参阅