From c921a6c565ddc6f3eef7054903e2566e99fcc414 Mon Sep 17 00:00:00 2001 From: Masahiro FUJIMOTO Date: Fri, 15 Oct 2021 01:04:20 +0900 Subject: CSS 座標変換の文書を更新（変換関数を除く） MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - 2021/10/13 時点の英語版に同期 --- files/ja/web/css/transform-origin/index.md | 602 +++++++++++------------------ 1 file changed, 227 insertions(+), 375 deletions(-) (limited to 'files/ja/web/css/transform-origin') diff --git a/files/ja/web/css/transform-origin/index.md b/files/ja/web/css/transform-origin/index.md index e7bb375699..1418eb51a2 100644 --- a/files/ja/web/css/transform-origin/index.md +++ b/files/ja/web/css/transform-origin/index.md @@ -3,41 +3,45 @@ title: transform-origin slug: Web/CSS/transform-origin tags: - CSS - - CSS Property - - CSS Transforms + - CSS プロパティ + - CSS 座標変換 - Reference - 'default value: center' - - 'recipe:css-property' + - recipe:css-property - transform-origin +browser-compat: css.properties.transform-origin translation_of: Web/CSS/transform-origin --- {{ CSSRef }} -**`transform-origin`** は [CSS](/ja/docs/Web/CSS) のプロパティで、要素の変形 (transform) における原点を設定します。 +**`transform-origin`** は [CSS](/ja/docs/Web/CSS) のプロパティで、要素の座標変換 (transform) における原点を設定します。 {{EmbedInteractiveExample("pages/css/transform-origin.html")}} - +座標変換の原点とは、それを中心に座標変換が適用される点です。例えば、 `[rotate()](/ja/docs/Web/CSS/transform-function/rotate)` 関数における座標変換の原点は、回転の中心です。 -変形の原点とは、それを中心に変形が適用される点です。例えば、 `[rotate()](/ja/docs/Web/CSS/transform-function/rotate)` 関数における変形の原点は、回転の中心です。 +実際には、このプロパティは一対の座標変換で、その要素の他の座標変換の周りを囲みます。最初の座標変換は、原点を真の原点である (0,0) に移動させます。その後、他の座標変換が適用されますが、座標変換の原点は (0,0) にあるので、これらの座標変換はその原点の周りで作用します。最後に逆方向の変換を行い，座標変換の原点を元の位置に戻します。したがって，この定義は 次のようになります。 -

このプロパティは最初にプロパティ値の反対に平行移動し、それから要素の変形を適用し、プロパティ値の分だけ平行移動する形でで適用されます。
- すなわち、

- -
transform-origin: -100% 50%;
+```css
+transform-origin: -100% 50%;
 transform: rotate(45deg);
-
+``` -この定義は以下の変形と同じです。 +この定義は以下の座標変換と同じです。 + +```css +transform-origin: 0 0; +transform: translate(-100%, 50%) rotate(45deg) translate(100%, -50%); +``` -
transform-origin: 0 0;
-transform: translate(-100%, 50%) rotate(45deg) translate(100%, -50%);
+右から左に読むと、`translate(100%, -50%)` は変換の原点を進の原点に移動するもので、`rotate(45deg)` は本来の座標変換であり、`translate(-100%, 50%)` は変換の原点をもとの場所に戻す変換です。 -既定で、変形の原点は `center` です。 +既定で、座標変換の原点は `center` です。 -

構文

+## 構文 -
/* 値１つの構文 */
+```css
+/* 値１つの構文 */
 transform-origin: 2px;
 transform-origin: bottom;
 
@@ -68,407 +72,255 @@ transform-origin: bottom right 2cm;
 /* グローバル値 */
 transform-origin: inherit;
 transform-origin: initial;
+transform-origin: revert;
 transform-origin: unset;
-
+``` + +`transform-origin` プロパティは、オフセットを表す 1 ～ 3 つの値を使用して指定することができます。明示的に定義されなかったオフセットは、それぞれの対応する[初期値](/ja/docs/Web/CSS/initial_value)にリセットされます。 + +単一の {{cssxref("<length>")}} または {{cssxref("<percentage>")}} が定義された場合、これは水平方向のオフセットを表します。 + +2 つ以上の値が定義され、どちらもの値もキーワードでない場合、または使われているキーワードが `center` だけであった場合、最初の値は水平方向のオフセットであり、二番目の値は垂直方向のオフセットです。 + +- 値 1 つの構文: + + - 値は {{cssxref("<length>")}}, {{cssxref("<percentage>")}}, または `left`, `center`, `right`, `top`, `bottom` のいずれかでなければなりません。 + +- 値 2 つの構文: + + - 一方の値は {{cssxref("<length>")}}, {{cssxref("<percentage>")}}, またはキーワードの `left`, `center`, `right` のいずれかでなければなりません。 + - もう一方の値は、 {{cssxref("<length>")}}, {{cssxref("<percentage>")}}, またはキーワードの `top`, `center`, `bottom` のいずれかでなければなりません。 + +- 値 3 つの構文: + + - 1 番目と 2 番目の値は、値 2 つの構文と同じです。 + - 3 番目の値は {{cssxref("<length>")}} でなければなりません。これは常に Z オフセットを表します。 -`transform-origin` プロパティは、オフセットを表す１～３つの値を使用して指定することができます。明示的に定義されなかったオフセットは、それぞれの対応する[初期値](/ja/docs/Web/CSS/initial_value)にリセットされます。 - -２つ以上の値が定義され、どちらもの値もキーワードでない場合、または使われているキーワードが `center` だけであった場合、最初の値は水平方向のオフセットであり、二番目の値は垂直方向のオフセットです。 - - - -

値

- -- x-offset - - : {{cssxref("<length>")}} または {{cssxref("<percentage>")}} の、ボックスの左端から変形の原点までの距離を示す値です。 -- offset-keyword +### 値 + +- _x-offset_ + - : {{cssxref("<length>")}} または {{cssxref("<percentage>")}} の、ボックスの左端から座標変換の原点までの距離を示す値です。 +- _offset-keyword_ - : `left`, `right`, `top`, `bottom`, `center` のいずれかのキーワードで、対応するオフセットを表します。 -- y-offset - - : {{cssxref("<length>")}} または {{cssxref("<percentage>")}} の、ボックスの右端から変形の原点までの距離を示す値です。 -- x-offset-keyword - - : `left`, `right`, `center` のいずれかのキーワードで、ボックスの左端から変形の原点までの距離を示します。 -- y-offset-keyword - - : `top`, `bottom`, `center` のいずれかのキーワードで、ボックスの上端から変形の原点までの距離を示します。 -- z-offset +- _y-offset_ + - : {{cssxref("<length>")}} または {{cssxref("<percentage>")}} の、ボックスの右端から座標変換の原点までの距離を示す値です。 +- _x-offset-keyword_ + - : `left`, `right`, `center` のいずれかのキーワードで、ボックスの左端から座標変換の原点までの距離を示します。 +- _y-offset-keyword_ + - : `top`, `bottom`, `center` のいずれかのキーワードで、ボックスの上端から座標変換の原点までの距離を示します。 +- _z-offset_ - : {{cssxref("<length>")}} 値 ({{cssxref("<percentage>")}} を指定すると文が無効になります) で、ユーザーの視点と z=0 原点の距離を示します。 -キーワードは便利な速記であり、次の {{cssxref("<percentage>")}} 値に相当します。 - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
キーワード値
`left``0%`
`center``50%`
`right``100%`
`top``0%`
`bottom``100%`
- -

公式定義

+キーワードは便利な速記形であり、次の {{cssxref("<percentage>")}} 値に相当します。 + +| Keyword | Value | +| -------- | ------ | +| `left` | `0%` | +| `center` | `50%` | +| `right` | `100%` | +| `top` | `0%` | +| `bottom` | `100%` | + +## 公式定義 {{CSSInfo}} -

形式文法

+> **Note:** `transform-origin` の初期値は、ルートの `` 要素と [foreignObject](/ja/docs/Web/SVG/Element/foreignObject) の直接の子である `` 要素を除いたすべての SVG 要素では `0 0` です。また、 `transform-origin` は他の CSS 要素と同様に `50% 50%` です。詳しくは [SVG transform-origin](/ja/docs/Web/SVG/Attribute/transform-origin) 属性を参照してください。 + +## 形式文法 {{csssyntax}} -

例

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
コードサンプル
- `transform: none;` - -
- `transform: rotate(30deg);` - - - - {{EmbedLiveSample('transform_rotate_only', '', 120, '', '', 'no-button') }} -
-

transform: rotate(30deg);
- transform-origin: 0 0;

- 		- - - {{EmbedLiveSample('transform_rotate', '', 120, '', '', 'no-button') }} -
-

transform: rotate(30deg);
- transform-origin: 100% 100%;

- 		- - - {{EmbedLiveSample('transform_rotate_with_percentage', '', 120, '', '', 'no-button') }} -
-

transform: rotate(30deg);
- transform-origin: -1em -3em;

- 		- - - {{EmbedLiveSample('transform_rotate_with_em', '', 120, '', '', 'no-button') }} -
- `transform: scale(1.7);` - - +``` + +```css hidden +.container { + display: grid; + grid-template-columns: 200px 100px; + gap: 20px; +} + +.example { + position: relative; + margin: 0 2em 4em 5em; +} + +.box { + display: inline-block; + width: 3em; + height: 3em; + border: solid 1px; + background-color: palegreen; +} + +.original { + position: absolute; + left: 0; + opacity: 20%; +} + +.box1 { + transform: none; +} + +.box2 { + transform: rotate(30deg); +} + +.box3 { + transform: rotate(30deg); + transform-origin: 0 0; +} + +.box4 { + transform: rotate(30deg); + transform-origin: 100% 100%; +} + +.box5 { + transform: rotate(30deg); + transform-origin: -1em -3em; +} + .box6 { -margin: 0.5em; -width: 3em; -height: 3em; -border: solid 1px; -background-color: palegreen; -transform: scale(`1.7`); --webkit-transform: scale(`1.7`); + transform: scale(1.7); } - - - - {{EmbedLiveSample('transform_scale_only', '', 120, '', '', 'no-button') }} -
-

transform: scale(1.7);
- transform-origin: 0 0;

- 		- - - {{EmbedLiveSample('transform_scale_without_origin', '', 120, '', '', 'no-button') }} -
-

transform: scale(1.7);
- transform-origin: 100% -30%;

- 		- - - {{EmbedLiveSample('transform_scale', '', 120, '', '', 'no-button') }} -
-

transform: skewX(50deg);
- transform-origin: 100% -30%;

- 		- - - {{EmbedLiveSample('transform_skew_x', '', 120, '', '', 'no-button') }} -
-

transform: skewY(50deg);
- transform-origin: 100% -30%;

- 		- - - {{EmbedLiveSample('transform_skew_y', '', 120, '', '', 'no-button') }} -
- -

仕様書

- - - - - - - - - - - - - - - - -
仕様書状態備考
{{ SpecName('CSS3 Transforms', '#transform-origin-property', 'transform-origin') }}{{ Spec2('CSS3 Transforms') }}
- -

ブラウザーの互換性

- -{{Compat("css.properties.transform-origin")}} +``` + +{{EmbedLiveSample('A_demonstration_of_various_transform_values', '', 1350) }} + +## ブラウザーの互換性 + +{{Compat}} ## 関連情報 - +- [CSS 座標変換の使用](/ja/docs/Web/CSS/CSS_Transforms/Using_CSS_transforms) +- -- cgit v1.2.3-54-g00ecf