skew()
Baseline
Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since 2015年7月.
skew() は CSS 関数で、要素を 2D 平面上でゆがめる変換を定義します。結果は <transform-function> データ型になります。
試してみましょう
transform: skew(0);
transform: skew(15deg, 15deg);
transform: skew(-0.06turn, 18deg);
transform: skew(0.312rad);
<section id="default-example">
<img
class="transition-all"
id="example-element"
src="/shared-assets/images/examples/firefox-logo.svg"
width="200" />
</section>
この変換はシアー変形 (せん断写像) で、要素内のそれぞれの点を水平および垂直方向に指定された角度でゆがませます。要素のそれぞれの角を掴んで、一定の角度に沿って引っ張ったような効果があります。
それぞれの点の座標は、指定された角度と原点からの距離に比例した値によって変更されます。よって、原点から遠くなるにしたがって、加えられる値が大きくなります。
構文
css
skew(ax)
skew(ax, ay)
値
形式文法
<skew()> =
skew( [ <angle> | <zero> ] , [ <angle> | <zero> ]? )
例
X 軸のみの変形
HTML
html
<div>通常</div>
<div class="skewed">歪め</div>
CSS
css
body {
margin: 20px;
}
div {
width: 80px;
height: 80px;
background-color: skyblue;
}
.skewed {
transform: skew(10deg); /* Equal to skewX(10deg) */
background-color: pink;
}
結果
両方の軸の変形
HTML
html
<div>通常</div>
<div class="skewed">歪め</div>
CSS
css
body {
margin: 20px;
}
div {
width: 80px;
height: 80px;
background-color: skyblue;
}
.skewed {
transform: skew(10deg, 10deg);
background-color: pink;
}
結果
仕様書
| Specification |
|---|
| CSS Transforms Module Level 1 # funcdef-transform-skew |