From 3c18a8fbac3cbd3c3ff0d9719292131c8bd3c8cb Mon Sep 17 00:00:00 2001 From: Masahiro FUJIMOTO Date: Sun, 21 Nov 2021 22:56:20 +0900 Subject: transform-function の座標変換関数を変換準備 MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../web/css/transform-function/skew()/index.html | 154 --------------------- 1 file changed, 154 deletions(-) delete mode 100644 files/ja/web/css/transform-function/skew()/index.html (limited to 'files/ja/web/css/transform-function/skew()/index.html') diff --git a/files/ja/web/css/transform-function/skew()/index.html b/files/ja/web/css/transform-function/skew()/index.html deleted file mode 100644 index f99a4a1ea0..0000000000 --- a/files/ja/web/css/transform-function/skew()/index.html +++ /dev/null @@ -1,154 +0,0 @@ ---- -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> データ型の互換性情報をご覧ください。

- -

関連情報

- - -- cgit v1.2.3-54-g00ecf