--- title: skew() slug: Web/CSS/transform-function/skew() tags: - CSS - CSS Function - CSS Transforms - Function - Reference translation_of: Web/CSS/transform-function/skew() ---
{{CSSRef}}

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

{{EmbedInteractiveExample("pages/css/function-skew.html")}}

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

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

構文

skew() で生成される回転の量は、 {{cssxref("<angle>")}} で指定します。正の数であれば、移動は時計回りです。負の数であれば、反時計回りになります。1つだけ値を設定した場合は X 軸に使用され、 Y 軸方向の変形は行いません。

skew(ax)

skew(ax, ay)

値

ax
{{cssxref("<angle>")}} で、 X 軸 (横座標) 方向にゆがめるのに使用する角度を表します。
ay
{{cssxref("<angle>")}} で、 Y 軸 (縦座標) 方向にゆがめるのに使用する角度を表します。定義されていない場合、既定値は 0 となり、水平方向にのみゆがめます。
ℝ2 のデカルト座標 ℝℙ2 の同次座標 ℝ3 のデカルト座標 ℝℙ3 の同次座標
1tan(ax)tan(ay)1 1tan(ax)0tan(ay)10001 1tan(ax)0tan(ay)10001 1tan(ax)00tan(ay)10000100001
[1 tan(ay) tan(ax) 1 0 0]

例

X 軸のみの変形

HTML

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

CSS

body {
  margin: 20px;
}

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

.skewed {
  transform: skew(10deg); /* Equal to skewX(10deg) */
  background-color: pink;
}

結果

{{EmbedLiveSample("Skewing_on_the_x-axis_only", 200, 200)}}

両方の軸の変形

HTML

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

CSS

body {
  margin: 20px;
}

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

.skewed {
  transform: skew(10deg, 10deg);
  background-color: pink;
}

結果

{{EmbedLiveSample("Skewing_on_both_axes", 200, 200)}}

仕様書

仕様書 状態 備考
{{SpecName("CSS3 Transforms", "#funcdef-transform-skew", "skew()")}} {{Spec2("CSS3 Transforms")}} 初回定義

ブラウザーの互換性

<transform-function> データ型の互換性情報をご覧ください。

関連情報