在此页

• 句法
• 范例
• 规范
• 浏览器兼容性
• 另请参阅
• 相关话题

skewX() CSS function defines a transformation that skews an element in the horizontal direction on the 2D plane. Its result is a <transform-function> data type.

The source for this interactive example is stored in a GitHub repository. If you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.

This transformation is a shear mapping ( transvection ) that distorts each point within an element by a certain angle in the horizontal direction. The abscissa coordinate of each point is modified by a value proportionate to the specified angle and the distance to the origin; thus, the farther from the origin a point is, the greater will be the value added it.

注意： skewX(a) 相当于 skew (a) .

句法

skewX(a)
					

值

a

是 <angle> representing the angle to use to distort the element along the abscissa.

Cartesian coordinates on ℝ 2	Homogeneous coordinates on ℝℙ 2	Cartesian coordinates on ℝ 3	Homogeneous coordinates on ℝℙ 3
$\left(\begin{array}{c}1tan(a)\\ 01\end{array}\right)$	$\left(\begin{array}{cc}1tan(a)& 0\\ 01& 0\\ 0& 0& 1\end{array}\right)$	$\left(\begin{array}{cc}1tan(a)& 0\\ 01& 0\\ 0& 0& 1\end{array}\right)$	$\left(\begin{array}{ccc}1tan(a)& 0& 0\\ 01& 0& 0\\ 0& 0& 1& 0\\ 0& 0& 0& 1\end{array}\right)$
	[1 0 tan(a) 1 0 0]

范例

HTML

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

CSS

div {
  width: 80px;
  height: 80px;
  background-color: skyblue;
}
.skewed {
  transform: skewX(10deg); /* Equal to skew(10deg) */
  background-color: pink;
}
					

结果

规范

规范	状态	注释
CSS Transforms Level 1 The definition of 'skewX()' in that specification.	工作草案	初始定义

浏览器兼容性

Please see the <transform-function> data type for compatibility info.

另请参阅

• transform
• <transform-function>

元数据

• 最后修改： 2020 年 11 月 3 日

相关话题

1. CSS
2. CSS 参考