skewX()

基线 广泛可用

此功能已得到良好建立，并且可以在许多设备和浏览器版本上运行。它自以下时间起在所有浏览器中都可用 2015年9月.

**skewX()** CSS 函数 定义了一个在 2D 平面上水平方向上倾斜元素的转换。其结果是 <transform-function> 数据类型。

试一试

此转换是一个剪切映射（平移），它通过水平方向上的某个角度扭曲元素内的每个点。每个点的横坐标（水平，x 坐标）都会根据指定的角度和到原点的距离进行修改；因此，点离原点越远，添加的值就越大。

注意：skewX(a) 等效于 skew(a)。

语法

css
skewX(a)

值

a

是一个 <angle>，表示用于沿横坐标（水平，x 坐标）扭曲元素的角度。

笛卡尔坐标 在 ℝ^2 齐次坐标 在 ℝℙ^2 笛卡尔坐标在 ℝ^3 齐次坐标在 ℝℙ^3
( 1 tan ( a ) 0 1 ) \left( \begin{array}{cc} 1 & \tan(a) \\ 0 & 1 \end{array} \right) ( 1 tan ( a ) 0 0 1 0 0 0 1 ) \left( \begin{array}{ccc} 1 & \tan(a) & 0 \\ 0 & 1 & 0 \\ 0 & 0 & 1 \end{array} \right) ( 1 tan ( a ) 0 0 1 0 0 0 1 ) \left( \begin{array}{ccc} 1 & \tan(a) & 0 \\ 0 & 1 & 0 \\ 0 & 0 & 1 \end{array} \right) ( 1 tan ( a ) 0 0 0 1 0 0 0 0 1 0 0 0 0 1 ) \left( \begin{array}{cccc} 1 & \tan(a) & 0 & 0 \\ 0 & 1 & 0 & 0 \\ 0 & 0 & 1 & 0 \\ 0 & 0 & 0 & 1 \end{array} \right)
[1 0 tan(a) 1 0 0]

示例

HTML

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

CSS

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

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

结果

规范

规范
CSS 转换模块级别 1
# funcdef-transform-skewx

浏览器兼容性

BCD 表格仅在启用 JavaScript 的浏览器中加载。

另请参阅