このページはコミュニティーの尽力で英語から翻訳されました。MDN Web Docsコミュニティーについてもっと知り、仲間になるにはこちらから。

View in EnglishAlways switch to English

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>  <img          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)
$(\begin{matrix} 1 & tan (ax) \\ tan (ay) & 1 \end{matrix}) \left( \begin{array}{cc} 1 & \tan(ax) \\ \tan(ay) & 1 \end{array} \right)$	$(\begin{matrix} 1 & tan (ax) & 0 \\ tan (ay) & 1 & 0 \\ 0 & 0 & 1 \end{matrix}) \left( \begin{array}{ccc} 1 & \tan(ax) & 0 \\ \tan(ay) & 1 & 0 \\ 0 & 0 & 1 \end{array} \right)$	$(\begin{matrix} 1 & tan (ax) & 0 \\ tan (ay) & 1 & 0 \\ 0 & 0 & 1 \end{matrix}) \left( \begin{array}{ccc} 1 & \tan(ax) & 0 \\ \tan(ay) & 1 & 0 \\ 0 & 0 & 1 \end{array} \right)$	$(\begin{matrix} 1 & tan (ax) & 0 & 0 \\ tan (ay) & 1 & 0 & 0 \\ 0 & 0 & 1 & 0 \\ 0 & 0 & 0 & 1 \end{matrix}) \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>歪め</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>歪め</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

ブラウザーの互換性

Help improve MDN

Learn how to contribute

This page was last modified on2026年1月3日 byMDN contributors.

View this page on GitHub •Report a problem with this content

Movatterモバイル変換

skew()

試してみましょう

構文

値

形式文法

例

X 軸のみの変形

HTML

CSS

結果

両方の軸の変形

HTML

CSS

結果

仕様書

ブラウザーの互換性

関連情報

Help improve MDN