skewX()
Baseline Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since September 2015.
skewX()
は CSS の関数で、要素を 2D 平面上で水平方向にゆがめる変換を定義します。結果は <transform-function>
データ型になります。
試してみましょう
この変換はシアー変形 (せん断写像) で、要素内のそれぞれの点を水平方向に指定された角度でゆがませます。それぞれの点の横座標は、指定された角度と原点からの距離に比例した値によって変更されます。よって、原点から遠くなるにしたがって、加えられる値が大きくなります。
メモ: skewX(a)
は skew(a)
と等価です。
構文
css
skewX(a)
値
例
HTML
html
<div>Normal</div>
<div class="skewed">Skewed</div>
CSS
css
div {
width: 80px;
height: 80px;
background-color: skyblue;
}
.skewed {
transform: skewX(10deg); /* skew(10deg) と同じ */
background-color: pink;
}
結果
仕様書
Specification |
---|
CSS Transforms Module Level 1 # funcdef-transform-skewx |
ブラウザーの互換性
BCD tables only load in the browser
関連情報
transform
<transform-function>
- 独立した座標変換プロパティ: