skew()

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.

skew() は CSS 関数で、要素を 2D 平面上でゆがめる変換を定義します。結果は <transform-function> データ型になります。

試してみましょう

この変換はシアー変形 (せん断写像) で、要素内のそれぞれの点を水平および垂直方向に指定された角度でゆがませます。要素のそれぞれの角を掴んで、一定の角度に沿って引っ張ったような効果があります。

それぞれの点の座標は、指定された角度と原点からの距離に比例した値によって変更されます。よって、原点から遠くなるにしたがって、加えられる値が大きくなります。

構文

skew() 関数は 1 つまたは 2 つの値を指定し、それぞれの軸に適用されるゆがみの量を表します。1 つだけ値を設定した場合は X 軸に使用され、 Y 軸方向の変形は行いません。

css
skew(ax)

skew(ax, ay)

値

ax

<angle> で、 X 軸 (横座標) 方向にゆがめるのに使用する角度を表します。

ay

<angle> で、 Y 軸 (縦座標) 方向にゆがめるのに使用する角度を表します。定義されていない場合、既定値は 0 となり、水平方向にのみゆがめます。

直交座標系 (ℝ^2) 同次座標系 (ℝℙ^2) 直交座標系 (ℝ^3) 同次座標系 (ℝℙ^3)
( 1 tan ( ax ) tan ( ay ) 1 ) ( 1 tan ( ax ) 0 tan ( ay ) 1 0 0 0 1 ) ( 1 tan ( ax ) 0 tan ( ay ) 1 0 0 0 1 ) ( 1 tan ( ax ) 0 0 tan ( ay ) 1 0 0 0 0 1 0 0 0 0 1 )
[1 tan(ay) tan(ax) 1 0 0]

例

X 軸のみの変形

HTML

html
<div>Normal</div>
<div class="skewed">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>Normal</div>
<div class="skewed">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

ブラウザーの互換性

BCD tables only load in the browser

関連情報