CSS `skew()` 関数

Baseline 広く利用可能

この機能は広く実装されており、多くのバージョンの端末やブラウザーで動作します。2015年7月以降、すべてのブラウザーで利用可能です。

skew() は CSS 関数で、要素を二次元平面上でゆがめる変換を定義します。結果は <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)

値

ax: <angle> で、 X 軸 (横座標) 方向にゆがめるのに使用する角度を表します。
ay 省略可: <angle> で、 Y 軸 (縦座標) 方向にゆがめるのに使用する角度を表します。定義されていない場合、デフォルト値は 0 となり、水平方向にのみゆがめます。

直交座標系 (ℝ^2)	同次座標系 (ℝℙ^2)	直交座標系 (ℝ^3)	同次座標系 (ℝℙ^3)
$\left( \begin{array}{cc} 1 & \tan(ax) \\ \tan(ay) & 1 \end{array} \right)$	$\left( \begin{array}{ccc} 1 & \tan(ax) & 0 \\ \tan(ay) & 1 & 0 \\ 0 & 0 & 1 \end{array} \right)$	$\left( \begin{array}{ccc} 1 & \tan(ax) & 0 \\ \tan(ay) & 1 & 0 \\ 0 & 0 & 1 \end{array} \right)$	$\left( \begin{array}{cccc} 1 & \tan(ax) & 0 & 0 \\ \tan(ay) & 1 & 0 & 0 \\ 0 & 0 & 1 & 0 \\ 0 & 0 & 0 & 1 \end{array} \right)$
	`[1 tan(ay) tan(ax) 1 0 0]`

形式文法

<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;
}