initial commit

2 files changed, 161 insertions, 0 deletions

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
+---
+<div>{{CSSRef}}</div>
+
+<p><ruby><strong>CSS 変形</strong><rp> (</rp><rt>CSS Transforms</rt><rp>) </rp></ruby>は CSS のモジュールの一つで、 CSS でスタイル付けされた要素をどのように二次元または三次元空間に変形できるかを定義します。</p>
+
+<h2 id="Reference" name="Reference">リファレンス</h2>
+
+<h3 id="Properties" name="Properties">プロパティ</h3>
+
+<div class="index">
+<ul>
+ <li>{{cssxref("backface-visibility")}}</li>
+ <li>{{cssxref("perspective")}}</li>
+ <li>{{cssxref("perspective-origin")}}</li>
+ <li>{{cssxref("rotate")}}</li>
+ <li>{{cssxref("scale")}}</li>
+ <li>{{cssxref("transform")}}</li>
+ <li>{{cssxref("transform-box")}}</li>
+ <li>{{cssxref("transform-origin")}}</li>
+ <li>{{cssxref("transform-style")}}</li>
+ <li>{{cssxref("translate")}}</li>
+</ul>
+</div>
+
+<h3 id="Data_types" name="Data_types">データ型</h3>
+
+<div class="index">
+<ul>
+ <li>{{cssxref("&lt;transform-function&gt;")}}</li>
+</ul>
+</div>
+
+<h2 id="Guides" name="Guides">ガイド</h2>
+
+<dl>
+ <dt><a href="/ja/docs/Web/CSS/CSS_Transforms/Using_CSS_transforms">CSS 変形の利用</a></dt>
+ <dd>CSS でスタイル付けされた要素をどのように変形するかについての手順を追ったチュートリアルです。</dd>
+</dl>
+
+<h2 id="Specifications" name="Specifications">仕様書</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">仕様書</th>
+   <th scope="col">状態</th>
+   <th scope="col">備考</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{ SpecName('CSS Transforms 2') }}</td>
+   <td>{{ Spec2('CSS Transforms 2') }}</td>
+   <td>独立した変形を追加。</td>
+  </tr>
+  <tr>
+   <td>{{ SpecName('CSS3 Transforms') }}</td>
+   <td>{{ Spec2('CSS3 Transforms') }}</td>
+   <td>初回定義</td>
+  </tr>
+ </tbody>
+</table>
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
+---
+<div>{{CSSRef}}</div>
+
+<p>座標空間を編集することで、 <strong>CSS 変形</strong> (transform) は通常のフロー処理を混乱させずに、影響下にあるコンテンツの位置を変えることができます。このガイドは変形の使用についての解説を行ないます。</p>
+
+<p>CSS 変形は、アフィン線形変換を HTML 要素に対して適用する一連の CSS プロパティによって実現されます。変形には回転 (rotation)、傾斜 (skewing)、拡大縮小 (scaling)、平行移動 (translation) が含まれており、二次元と三次元空間の両方の平行移動 (translation) があります。</p>
+
+<div class="warning">
+<p><a href="/ja/docs/Web/CSS/CSS_Box_Model">ボックスモデル</a>によって配置された要素のみが <code>transform</code> を実行できます。言うまでもなく、 <code>display: block</code> である要素がボックスモデルで配置されます。</p>
+</div>
+
+<h2 id="CSS_transforms_properties" name="CSS_transforms_properties">CSS 変形のプロパティ</h2>
+
+<p>CSS 変形の定義に使われる重要なプロパティが 2 つあります。 {{cssxref("transform")}} と {{cssxref("transform-origin")}} です。</p>
+
+<dl>
+ <dt>{{cssxref("transform-origin")}}</dt>
+ <dd>原点位置を指定します。既定では、これは要素の中央ですが、移動することができます。回転、拡大縮小や傾斜など決まった点が引数として必要な変形で使用されれます。</dd>
+ <dt>{{cssxref("transform")}}</dt>
+ <dd>要素に適用する変形を指定します。変形の空白区切りのリストで、合成操作の要求された順番で適用されます。変換の合成は右から左の順に適用されます。</dd>
+</dl>
+
+<h2 id="Examples" name="Examples">例</h2>
+
+<p>これが変形前の MDN ロゴの画像です。</p>
+
+<p><img alt="MDN ロゴ" src="https://mdn.mozillademos.org/files/12539/Screen%20Shot%202016-02-16%20at%2015.53.54.png" style="height: 106px; width: 110px;"></p>
+
+<h3 id="Rotating" name="Rotating">回転</h3>
+
+<p>ここでは MDN ロゴを、左下の角から90度回転させます。</p>
+
+<pre class="brush: html notranslate">&lt;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"&gt;
+</pre>
+
+<p>{{EmbedLiveSample('Rotating', 'auto', 240) }}</p>
+
+<h3 id="Skewing_and_translating" name="Skewing_and_translating">傾斜と平行移動</h3>
+
+<p>この例は div 要素を10度傾斜させ、 X 軸に沿って 150 ピクセル平行移動します。</p>
+
+<pre class="brush: html notranslate">&lt;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"&gt;
+</pre>
+
+<p>{{EmbedLiveSample('Skewing_and_translating') }}</p>
+
+<h2 id="3D_specific_CSS_properties" name="3D_specific_CSS_properties">3D 特有の CSS プロパティ</h2>
+
+<p>立体空間で CSS 変形 を行うのは、もう少し複雑になります。遠近感を与えて 3D 空間の環境設定を行うことから始める必要があり、それから 2D の要素がその空間でとる挙動を設定しなければなりません。</p>
+
+<h3 id="Perspective" name="Perspective">遠近感</h3>
+
+<p>設定する最初の要素は遠近感 (perspective) です。遠近感は 3D の印象を与えるものです。見る人から遠ざかるほど、ものが小さくなります。</p>
+
+<p>{{page("/ja/docs/Web/CSS/perspective", "Setting perspective", 0, 0, 3)}}</p>
+
+<p>二つ目の設定要素は見る人の位置で、 {{cssxref("perspective-origin")}} プロパティを使います。既定では遠近感は見る人の中央に合わせられますが、いつも妥当であるとは限りません。</p>
+
+<p>{{page("/ja/docs/Web/CSS/perspective-origin", "Changing the perspective origin", 0, 0, 3)}}</p>
+
+<p>ここまで完了すれば、 3D 空間で要素に働きかけることができます。</p>
+
+<h2 id="See_also" name="See_also">関連情報</h2>
+
+<ul>
+ <li><a href="/ja/docs/Web/Guide/Events/Using_device_orientation_with_3D_transforms" title="Using Deviceorientation with 3D Transforms">端末の向きと 3D 変形の併用</a></li>
+ <li><a href="http://desandro.github.com/3dtransforms/" title="http://desandro.github.com/3dtransforms/">Intro to CSS 3D transforms</a> (David DeSandro によるブログ記事)</li>
+ <li><a href="https://css-transform.moro.es/">CSS Transform Playground</a> (CSS 変形機能を視覚化するオンラインツール)</li>
+</ul>