From 991da9bf0975e595f7cc584cdf2ea6cb8a14b7ad Mon Sep 17 00:00:00 2001 From: Masahiro FUJIMOTO Date: Thu, 14 Oct 2021 00:57:05 +0900 Subject: CSS 変換の各ページの変換準備 MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- files/ja/web/css/transform-origin/index.html | 476 --------------------------- files/ja/web/css/transform-origin/index.md | 474 ++++++++++++++++++++++++++ 2 files changed, 474 insertions(+), 476 deletions(-) delete mode 100644 files/ja/web/css/transform-origin/index.html create mode 100644 files/ja/web/css/transform-origin/index.md (limited to 'files/ja/web/css/transform-origin') diff --git a/files/ja/web/css/transform-origin/index.html b/files/ja/web/css/transform-origin/index.html deleted file mode 100644 index 3e48cbe9c0..0000000000 --- a/files/ja/web/css/transform-origin/index.html +++ /dev/null @@ -1,476 +0,0 @@ ---- -title: transform-origin -slug: Web/CSS/transform-origin -tags: - - CSS - - CSS Property - - CSS Transforms - - Reference - - 'default value: center' - - 'recipe:css-property' - - transform-origin -translation_of: Web/CSS/transform-origin ---- -
{{ CSSRef }}
- -

transform-origin は CSS のプロパティで、要素の変形 (transform) における原点を設定します。

- -
{{EmbedInteractiveExample("pages/css/transform-origin.html")}}
- - - -

変形の原点とは、それを中心に変形が適用される点です。例えば、 rotate() 関数における変形の原点は、回転の中心です。

- -

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

- -
transform-origin: -100% 50%;
-transform: rotate(45deg);
-
- -

この定義は以下の変形と同じです。

- -
transform-origin: 0 0;
-transform: translate(-100%, 50%) rotate(45deg) translate(100%, -50%);
- -

既定で、変形の原点は center です。

- -

構文

- -
/* 値１つの構文 */
-transform-origin: 2px;
-transform-origin: bottom;
-
-/* x-offset | y-offset */
-transform-origin: 3cm 2px;
-
-/* x-offset-keyword | y-offset */
-transform-origin: left 2px;
-
-/* x-offset-keyword | y-offset-keyword */
-transform-origin: right top;
-
-/* y-offset-keyword | x-offset-keyword */
-transform-origin: top right;
-
-/* x-offset | y-offset | z-offset */
-transform-origin: 2px 30% 10px;
-
-/* x-offset-keyword | y-offset | z-offset */
-transform-origin: left 5px -3px;
-
-/* x-offset-keyword | y-offset-keyword | z-offset */
-transform-origin: right bottom 2cm;
-
-/* y-offset-keyword | x-offset-keyword | z-offset */
-transform-origin: bottom right 2cm;
-
-/* グローバル値 */
-transform-origin: inherit;
-transform-origin: initial;
-transform-origin: unset;
-
- -

transform-origin プロパティは、オフセットを表す１～３つの値を使用して指定することができます。明示的に定義されなかったオフセットは、それぞれの対応する初期値にリセットされます。

- -

２つ以上の値が定義され、どちらもの値もキーワードでない場合、または使われているキーワードが center だけであった場合、最初の値は水平方向のオフセットであり、二番目の値は垂直方向のオフセットです。

- - - -

値

- -
-
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
-
{{cssxref("<length>")}} 値 ({{cssxref("<percentage>")}} を指定すると文が無効になります) で、ユーザーの視点と z=0 原点の距離を示します。
-
- -

キーワードは便利な速記であり、次の {{cssxref("<percentage>")}} 値に相当します。

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
キーワード値
left0%
center50%
right100%
top0%
bottom100%
- -

公式定義

- -

{{CSSInfo}}

- -

形式文法

- -{{csssyntax}} - -

例

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
コードサンプル
-

transform: none;

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

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

- 		- - -
{{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")}}

- -

関連情報

- - diff --git a/files/ja/web/css/transform-origin/index.md b/files/ja/web/css/transform-origin/index.md new file mode 100644 index 0000000000..e7bb375699 --- /dev/null +++ b/files/ja/web/css/transform-origin/index.md @@ -0,0 +1,474 @@ +--- +title: transform-origin +slug: Web/CSS/transform-origin +tags: + - CSS + - CSS Property + - CSS Transforms + - Reference + - 'default value: center' + - 'recipe:css-property' + - transform-origin +translation_of: Web/CSS/transform-origin +--- +{{ CSSRef }} + +**`transform-origin`** は [CSS](/ja/docs/Web/CSS) のプロパティで、要素の変形 (transform) における原点を設定します。 + +{{EmbedInteractiveExample("pages/css/transform-origin.html")}} + + + +変形の原点とは、それを中心に変形が適用される点です。例えば、 `[rotate()](/ja/docs/Web/CSS/transform-function/rotate)` 関数における変形の原点は、回転の中心です。 + +

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

+ +
transform-origin: -100% 50%;
+transform: rotate(45deg);
+
+ +この定義は以下の変形と同じです。 + +
transform-origin: 0 0;
+transform: translate(-100%, 50%) rotate(45deg) translate(100%, -50%);
+ +既定で、変形の原点は `center` です。 + +

構文

+ +
/* 値１つの構文 */
+transform-origin: 2px;
+transform-origin: bottom;
+
+/* x-offset | y-offset */
+transform-origin: 3cm 2px;
+
+/* x-offset-keyword | y-offset */
+transform-origin: left 2px;
+
+/* x-offset-keyword | y-offset-keyword */
+transform-origin: right top;
+
+/* y-offset-keyword | x-offset-keyword */
+transform-origin: top right;
+
+/* x-offset | y-offset | z-offset */
+transform-origin: 2px 30% 10px;
+
+/* x-offset-keyword | y-offset | z-offset */
+transform-origin: left 5px -3px;
+
+/* x-offset-keyword | y-offset-keyword | z-offset */
+transform-origin: right bottom 2cm;
+
+/* y-offset-keyword | x-offset-keyword | z-offset */
+transform-origin: bottom right 2cm;
+
+/* グローバル値 */
+transform-origin: inherit;
+transform-origin: initial;
+transform-origin: unset;
+
+ +`transform-origin` プロパティは、オフセットを表す１～３つの値を使用して指定することができます。明示的に定義されなかったオフセットは、それぞれの対応する[初期値](/ja/docs/Web/CSS/initial_value)にリセットされます。 + +２つ以上の値が定義され、どちらもの値もキーワードでない場合、または使われているキーワードが `center` だけであった場合、最初の値は水平方向のオフセットであり、二番目の値は垂直方向のオフセットです。 + + + +

値

+ +- 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 + - : {{cssxref("<length>")}} 値 ({{cssxref("<percentage>")}} を指定すると文が無効になります) で、ユーザーの視点と z=0 原点の距離を示します。 + +キーワードは便利な速記であり、次の {{cssxref("<percentage>")}} 値に相当します。 + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
キーワード値
`left``0%`
`center``50%`
`right``100%`
`top``0%`
`bottom``100%`
+ +

公式定義

+ +{{CSSInfo}} + +

形式文法

+ +{{csssyntax}} + +

例

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
コードサンプル
+ `transform: none;` + + + + {{EmbedLiveSample('transform_none', '', 120, '', '', 'no-button') }} +
+ `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);` + + + + {{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")}} + +## 関連情報 + + -- cgit v1.2.3-54-g00ecf