skewY()
skewY()
は CSS の関数で、要素を二次元平面上で垂直方向にゆがめる変換を定義します。結果は <transform-function>
データ型になります。
試してみましょう
この変換はシアー変形(せん断写像)で、要素内のそれぞれの点を垂直方向に指定された角度でゆがませます。 それぞれの点の縦座標は、指定された角度と原点からの距離に比例した値によって変更されます。 よって、原点から遠くなるにしたがって、加えられる値が大きくなります。
構文
css
skewY(a)
値
a
-
<angle>
で、縦座標方向にゆがめるのに使用する角度を表します。
ℝ^2 のデカルト座標 | ℝℙ^2 の同次座標 | ℝ^3 のデカルト座標 | ℝℙ^3 の同次座標 |
---|---|---|---|
[1 tan(a) 0 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: skewY(40deg);
background-color: pink;
}
結果
仕様書
Specification |
---|
CSS Transforms Module Level 1 # funcdef-transform-skewy |
ブラウザーの互換性
BCD tables only load in the browser