From 33058f2b292b3a581333bdfb21b8f671898c5060 Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Tue, 8 Dec 2020 14:40:17 -0500 Subject: initial commit --- files/ja/web/css/css_transforms/index.html | 72 +++++++++++++++++ .../css_transforms/using_css_transforms/index.html | 89 ++++++++++++++++++++++ 2 files changed, 161 insertions(+) create mode 100644 files/ja/web/css/css_transforms/index.html create mode 100644 files/ja/web/css/css_transforms/using_css_transforms/index.html (limited to 'files/ja/web/css/css_transforms') diff --git a/files/ja/web/css/css_transforms/index.html b/files/ja/web/css/css_transforms/index.html new file mode 100644 index 0000000000..55de83ba04 --- /dev/null +++ b/files/ja/web/css/css_transforms/index.html @@ -0,0 +1,72 @@ +--- +title: CSS 変形 +slug: Web/CSS/CSS_Transforms +tags: + - CSS + - CSS Transforms + - Guide + - Overview + - Reference +translation_of: Web/CSS/CSS_Transforms +--- +
{{CSSRef}}
+ +

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

+ +

リファレンス

+ +

プロパティ

+ +
+ +
+ +

データ型

+ +
+ +
+ +

ガイド

+ +
+
CSS 変形の利用
+
CSS でスタイル付けされた要素をどのように変形するかについての手順を追ったチュートリアルです。
+
+ +

仕様書

+ + + + + + + + + + + + + + + + + + + + + +
仕様書状態備考
{{ 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 new file mode 100644 index 0000000000..da27f0240b --- /dev/null +++ b/files/ja/web/css/css_transforms/using_css_transforms/index.html @@ -0,0 +1,89 @@ +--- +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 空間で要素に働きかけることができます。

+ +

関連情報

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