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

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

Syntax

skewY(a)

Values

a
<angle>は縦座標に沿って要素を歪めるために使用される角度です。
Cartesian coordinates on ℝ2 Homogeneous coordinates on ℝℙ2 Cartesian coordinates on ℝ3 Homogeneous coordinates on ℝℙ3
10tan(ax)1 100tan(ax)10001 100tan(ax)10001 1000tan(ax)10000100001
[1 tan(a) 0 1 0 0]

Examples

HTML

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

CSS

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

.skewed {
  transform: skewY(40deg);
  background-color: pink;
}

Result

ブラウザーの互換性

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

See also

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

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