skewX()CSS関数は、2D平面上で水平方向に要素を歪める変換を定義します。その結果は<transform-function>データ型となります。

この変換は、水平方向にある角度より要素内の各点を歪ませる、せん断写像(transvection) です。各点の横座標は、指定された角度と原点までの距離に比例する値によって変更されます。 したがって、原点から遠いほど値が大きくなります。

Note: skewX(a) はskew(a)と同じです。

Syntax

skewX(a)

Values

a
 <angle> は横座標に沿って要素を歪めるために使用される角度です。
Cartesian coordinates on ℝ2 Homogeneous coordinates on ℝℙ2 Cartesian coordinates on ℝ3 Homogeneous coordinates on ℝℙ3
1tan(ay)01 1tan(ay)0010001 1tan(ay)0010001 1tan(ay)00010000100001
[1 0 tan(a) 1 0 0]

Examples

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;
}

Result

ブラウザーの互換性

互換性情報については<transform-function>データ型を確認してください。

See also

ドキュメントのタグと貢献者

このページの貢献者: inkusu
最終更新者: inkusu,