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/css_transforms/index.md | 83 +++++++------------ .../css_transforms/using_css_transforms/index.html | 89 --------------------- .../css_transforms/using_css_transforms/index.md | 85 ++++++++++++++++++++ .../css_transforms/using_css_transforms/logo.png | Bin 0 -> 5238 bytes 4 files changed, 113 insertions(+), 144 deletions(-) delete mode 100644 files/ja/web/css/css_transforms/using_css_transforms/index.html create mode 100644 files/ja/web/css/css_transforms/using_css_transforms/index.md create mode 100644 files/ja/web/css/css_transforms/using_css_transforms/logo.png (limited to 'files/ja/web/css/css_transforms') diff --git a/files/ja/web/css/css_transforms/index.md b/files/ja/web/css/css_transforms/index.md index 55de83ba04..c9cc0fd07a 100644 --- a/files/ja/web/css/css_transforms/index.md +++ b/files/ja/web/css/css_transforms/index.md @@ -1,72 +1,45 @@ --- -title: CSS 変形 +title: CSS 変換 slug: Web/CSS/CSS_Transforms tags: - CSS - - CSS Transforms - - Guide - - Overview + - CSS 変換 + - ガイド + - 概要 - Reference translation_of: Web/CSS/CSS_Transforms --- -
{{CSSRef}}
+{{CSSRef}} -

CSS 変形 (CSS Transforms) は CSS のモジュールの一つで、 CSS でスタイル付けされた要素をどのように二次元または三次元空間に変形できるかを定義します。

+**CSS 変換** (CSS Transforms) は CSS のモジュールの一つで、 CSS でスタイル付けされた要素をどのように二次元または三次元空間に変換できるかを定義します。 -

リファレンス

+## リファレンス -

プロパティ

+### プロパティ -
- -
+- {{cssxref("backface-visibility")}} +- {{cssxref("perspective")}} +- {{cssxref("perspective-origin")}} +- {{cssxref("rotate")}} +- {{cssxref("scale")}} +- {{cssxref("transform")}} +- {{cssxref("transform-box")}} +- {{cssxref("transform-origin")}} +- {{cssxref("transform-style")}} +- {{cssxref("translate")}} -

データ型

+## データ型 -
- -
+- {{cssxref("<transform-function>")}} -

ガイド

+## ガイド -
-
CSS 変形の利用
-
CSS でスタイル付けされた要素をどのように変形するかについての手順を追ったチュートリアルです。
-
+- [CSS 変換の利用](/ja/docs/Web/CSS/CSS_Transforms/Using_CSS_transforms) + - : CSS でスタイル付けされた要素をどのように変換するかについての手順を追ったチュートリアルです。 -

仕様書

+## 仕様書 - - - - - - - - - - - - - - - - - - - - -
仕様書状態備考
{{ SpecName('CSS Transforms 2') }}{{ Spec2('CSS Transforms 2') }}独立した変形を追加。
{{ SpecName('CSS3 Transforms') }}{{ Spec2('CSS3 Transforms') }}初回定義
+| 仕様書 | 状態 | 備考 | +| ---------------------------------- | ------------------------------- | ------------------ | +| {{ SpecName('CSS Transforms 2') }} | {{ Spec2('CSS Transforms 2') }} | 独立した変換を追加 | +| {{ SpecName('CSS3 Transforms') }} | {{ Spec2('CSS3 Transforms') }} | 初回定義 | diff --git a/files/ja/web/css/css_transforms/using_css_transforms/index.html b/files/ja/web/css/css_transforms/using_css_transforms/index.html deleted file mode 100644 index 605a005836..0000000000 --- a/files/ja/web/css/css_transforms/using_css_transforms/index.html +++ /dev/null @@ -1,89 +0,0 @@ ---- -title: CSS 変形の使用 -slug: Web/CSS/CSS_Transforms/Using_CSS_transforms -tags: - - 3D - - Advanced - - CSS - - CSS Transforms - - Graphics - - Guide - - Rotate - - Scale - - Scaling - - perspective - - rotation -translation_of: Web/CSS/CSS_Transforms/Using_CSS_transforms ---- -
{{CSSRef}}
- -

座標空間を編集することで、 CSS 変形 (transform) は通常のフロー処理を混乱させずに、影響下にあるコンテンツの位置を変えることができます。このガイドは変形の使用についての解説を行ないます。

- -

CSS 変形は、アフィン線形変換を HTML 要素に対して適用する一連の CSS プロパティによって実現されます。変形には回転 (rotation)、傾斜 (skewing)、拡大縮小 (scaling)、平行移動 (translation) が含まれており、二次元と三次元空間の両方の平行移動 (translation) があります。

- -
-

ボックスモデルによって配置された要素のみが transform を実行できます。言うまでもなく、 display: block である要素がボックスモデルで配置されます。

-
- -

CSS 変形のプロパティ

- -

CSS 変形の定義に使われる重要なプロパティが 2 つあります。 {{cssxref("transform")}} と {{cssxref("transform-origin")}} です。

- -
-
{{cssxref("transform-origin")}}
-
原点位置を指定します。既定では、これは要素の中央ですが、移動することができます。回転、拡大縮小や傾斜など決まった点が引数として必要な変形で使用されれます。
-
{{cssxref("transform")}}
-
要素に適用する変形を指定します。変形の空白区切りのリストで、合成操作の要求された順番で適用されます。変換の合成は右から左の順に適用されます。
-
- -

例

- -

これが変形前の MDN ロゴの画像です。

- -

MDN ロゴ

- -

回転

- -

ここでは MDN ロゴを、左下の角から90度回転させます。

- -
<img style="transform: rotate(90deg);
-            transform-origin: bottom left;"
-     src="https://mdn.mozillademos.org/files/12539/Screen%20Shot%202016-02-16%20at%2015.53.54.png">
-
- -

{{EmbedLiveSample('Rotating', 'auto', 240) }}

- -

傾斜と平行移動

- -

この例は div 要素を10度傾斜させ、 X 軸に沿って 150 ピクセル平行移動します。

- -
<img style="transform: skewx(10deg) translatex(150px);
-            transform-origin: bottom left;"
-     src="https://mdn.mozillademos.org/files/12539/Screen%20Shot%202016-02-16%20at%2015.53.54.png">
-
- -

{{EmbedLiveSample('Skewing_and_translating') }}

- -

3D 特有の CSS プロパティ

- -

立体空間で CSS 変形 を行うのは、もう少し複雑になります。遠近感を与えて 3D 空間の環境設定を行うことから始める必要があり、それから 2D の要素がその空間でとる挙動を設定しなければなりません。

- -

遠近感

- -

設定する最初の要素は遠近感 (perspective) です。遠近感は 3D の印象を与えるものです。見る人から遠ざかるほど、ものが小さくなります。

- -

{{page("/ja/docs/Web/CSS/perspective", "Setting perspective", 0, 0, 3)}}

- -

二つ目の設定要素は見る人の位置で、 {{cssxref("perspective-origin")}} プロパティを使います。既定では遠近感は見る人の中央に合わせられますが、いつも妥当であるとは限りません。

- -

{{page("/ja/docs/Web/CSS/perspective-origin", "Changing the perspective origin", 0, 0, 3)}}

- -

ここまで完了すれば、 3D 空間で要素に働きかけることができます。

- -

関連情報

- - diff --git a/files/ja/web/css/css_transforms/using_css_transforms/index.md b/files/ja/web/css/css_transforms/using_css_transforms/index.md new file mode 100644 index 0000000000..7ebaeeb3c3 --- /dev/null +++ b/files/ja/web/css/css_transforms/using_css_transforms/index.md @@ -0,0 +1,85 @@ +--- +title: CSS 変換の使用 +slug: Web/CSS/CSS_Transforms/Using_CSS_transforms +tags: + - 3D + - Advanced + - CSS + - CSS Transforms + - Graphics + - ガイド + - Rotate + - Scale + - Scaling + - perspective + - rotation +translation_of: Web/CSS/CSS_Transforms/Using_CSS_transforms +--- +{{CSSRef}} + +**CSS 変換** (transform) は、座標空間を編集することで、通常のフロー処理を混乱させずに影響下にあるコンテンツの形状や位置を変えることができます。このガイドは変換の使用についての解説を行ないます。 + +CSS 変換は、アフィン線形変換を HTML 要素に対して適用する一連の CSS プロパティによって実現されます。変換には、二次元と三次元空間の両方について回転 (rotation)、傾斜 (skewing)、拡大縮小 (scaling)、平行移動 (translation) があります。 + +> **Warning:** [ボックスモデル](/ja/docs/Web/CSS/CSS_Box_Model)によって配置された要素に対してのみ `transform` を実行することができます。言うまでもなく、 `display: block` である要素がボックスモデルで配置されます。 + +## CSS 変換のプロパティ + +CSS 変換の定義に使われる重要なプロパティが 2 つあります。 {{cssxref("transform")}} と {{cssxref("transform-origin")}} です。 + +- {{cssxref("transform-origin")}} + - : 原点位置を指定します。既定では、これは要素の中央ですが、移動することができます。回転、拡大縮小や傾斜など決まった点が引数として必要な変換で使用されれます。 +- {{cssxref("transform")}} + - : 要素に適用する変換を指定します。変換の空白区切りのリストで、合成操作の要求された順番で適用されます。変換の合成は右から左の順に適用されます。 + +## 例 + +これが変換前の MDN ロゴの画像です。 + +![MDN ロゴ](logo.png) + +

回転

+ +ここでは MDN ロゴを、左下の角から 90 度回転させます。 + +```html + +``` + +{{EmbedLiveSample('Rotating', 'auto', 240) }} + +

傾斜と平行移動

+ +この例は div 要素を 10 度傾斜させ、 X 軸に沿って 150 ピクセル平行移動します。 + +```html + +``` + +{{EmbedLiveSample('Skewing_and_translating') }} + +## 3D 特有の CSS プロパティ + +立体空間で CSS 変換 を行うのは、もう少し複雑になります。遠近感を与えて 3D 空間の環境設定を行うことから始める必要があり、それから 2D の要素がその空間でとる挙動を設定しなければなりません。 + +

遠近感

+ +設定する最初の要素は遠近感 (perspective) です。遠近感は 3D の印象を与えるものです。見る人から遠ざかるほど、ものが小さくなります。 + +{{page("/ja/docs/Web/CSS/perspective", "Setting perspective", 0, 0, 3)}} + +二つ目の設定要素は見る人の位置で、 {{cssxref("perspective-origin")}} プロパティを使います。既定では遠近感は見る人の中央に合わせられますが、いつも妥当であるとは限りません。 + +{{page("/ja/docs/Web/CSS/perspective-origin", "Changing the perspective origin", 0, 0, 3)}} + +ここまで行えば、 3D 空間に要素を配置することができます。 + +## 関連情報 + +- [端末の向きと 3D 変換の併用](/ja/docs/Web/Events/Using_device_orientation_with_3D_transforms) +- [Intro to CSS 3D transforms](http://desandro.github.com/3dtransforms/) (David DeSandro によるブログ記事) +- [CSS Transform Playground](https://css-transform.moro.es/) (CSS 変換機能を視覚化するオンラインツール) diff --git a/files/ja/web/css/css_transforms/using_css_transforms/logo.png b/files/ja/web/css/css_transforms/using_css_transforms/logo.png new file mode 100644 index 0000000000..d0e4f1d55b Binary files /dev/null and b/files/ja/web/css/css_transforms/using_css_transforms/logo.png differ -- cgit v1.2.3-54-g00ecf