initial commit

1 files changed, 478 insertions, 0 deletions

diff --git a/files/ja/web/css/transform-origin/index.html b/files/ja/web/css/transform-origin/index.html
new file mode 100644
index 0000000000..ae06a595f3
--- /dev/null
+++ b/files/ja/web/css/transform-origin/index.html
@@ -0,0 +1,478 @@
+---
+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
+---
+<div>{{ CSSRef }}</div>
+
+<p><strong><code>transform-origin</code></strong> は <a href="/ja/docs/Web/CSS">CSS</a> のプロパティで、要素の<ruby>変形<rp> (</rp><rt>transform</rt><rp>) </rp></ruby>における原点を設定します。</p>
+
+<div>{{EmbedInteractiveExample("pages/css/transform-origin.html")}}</div>
+
+<p class="hidden">このデモのソースファイルは GitHub リポジトリに格納されています。デモプロジェクトに協力したい場合は、 <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> をクローンしてプルリクエストを送信してください。</p>
+
+<p>変形の原点とは、それを中心に変形が適用される点です。例えば、 <code><a href="/ja/docs/Web/CSS/transform-function/rotate">rotate()</a></code> 関数における変形の原点は、回転の中心です。</p>
+
+<p>このプロパティは最初にプロパティ値の反対に平行移動し、それから要素の変形を適用し、プロパティ値の分だけ平行移動する形でで適用されます。<br>
+ すなわち、</p>
+
+<pre class="brush: css notranslate">transform-origin: -100% 50%;
+transform: rotate(45deg);
+</pre>
+
+<p>この定義は以下の変形と同じです。</p>
+
+<pre class="brush: css notranslate">transform-origin: 0 0;
+transform: translate(-100%, 50%) rotate(45deg) translate(100%, -50%);</pre>
+
+<p>既定で、変形の原点は <code>center</code> です。</p>
+
+<h2 id="Syntax" name="Syntax">構文</h2>
+
+<pre class="brush: css notranslate">/* 値１つの構文 */
+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;
+</pre>
+
+<p><code>transform-origin</code> プロパティは、オフセットを表す１～３つの値を使用して指定することができます。明示的に定義されなかったオフセットは、それぞれの対応する<a href="/ja/docs/Web/CSS/initial_value">初期値</a>にリセットされます。</p>
+
+<p>２つ以上の値が定義され、どちらもの値もキーワードでない場合、または使われているキーワードが <code>center</code> だけであった場合、最初の値は水平方向のオフセットであり、二番目の値は垂直方向のオフセットです。</p>
+
+<ul>
+ <li>値１つの構文:
+  <ul>
+   <li>値は {{cssxref("&lt;length&gt;")}}, {{cssxref("&lt;percentage&gt;")}}, 又は <code>left</code>, <code>center</code>, <code>right</code>, <code>top</code>, <code>bottom</code> のうちの１つでなければなりません。</li>
+  </ul>
+ </li>
+ <li>値２つの構文:
+  <ul>
+   <li>一方の値は {{cssxref("&lt;length&gt;")}}, {{cssxref("&lt;percentage&gt;")}}, 又はキーワードの <code>left</code>, <code>center</code>, <code>right</code> のうちの１つでなければなりません。</li>
+   <li>もう一方の値は、 {{cssxref("&lt;length&gt;")}}, {{cssxref("&lt;percentage&gt;")}}, 又はキーワードの <code>top</code>, <code>center</code>, <code>bottom</code> のうちの１つでなければなりません。</li>
+  </ul>
+ </li>
+ <li>値３つの構文:
+  <ul>
+   <li>１番目と２番目の値は、値２つの構文と同じです。</li>
+   <li>３番目の値は {{cssxref("&lt;length&gt;")}} でなければなりません。これは常に Z オフセットを表します。</li>
+  </ul>
+ </li>
+</ul>
+
+<h3 id="Values" name="Values">値</h3>
+
+<dl>
+ <dt><var>x-offset</var></dt>
+ <dd>{{cssxref("&lt;length&gt;")}} または {{cssxref("&lt;percentage&gt;")}} の、ボックスの左端から変形の原点までの距離を示す値です。</dd>
+ <dt><var>offset-keyword</var></dt>
+ <dd><code>left</code>, <code>right</code>, <code>top</code>, <code>bottom</code>, <code>center</code> のいずれかのキーワードで、対応するオフセットを表します。</dd>
+ <dt><var>y-offset</var></dt>
+ <dd>{{cssxref("&lt;length&gt;")}} または {{cssxref("&lt;percentage&gt;")}} の、ボックスの右端から変形の原点までの距離を示す値です。</dd>
+ <dt><var>x-offset-keyword</var></dt>
+ <dd><code>left</code>, <code>right</code>, <code>center</code> のいずれかのキーワードで、ボックスの左端から変形の原点までの距離を示します。</dd>
+ <dt><var>y-offset-keyword</var></dt>
+ <dd><code>top</code>, <code>bottom</code>, <code>center</code> のいずれかのキーワードで、ボックスの上端から変形の原点までの距離を示します。</dd>
+ <dt><var>z-offset</var></dt>
+ <dd>{{cssxref("&lt;length&gt;")}} 値 ({{cssxref("&lt;percentage&gt;")}} を指定すると文が無効になります) で、ユーザーの視点と z=0 原点の距離を示します。</dd>
+</dl>
+
+<p>キーワードは便利な速記であり、次の {{cssxref("&lt;percentage&gt;")}} 値に相当します。</p>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">キーワード</th>
+   <th scope="col">値</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><code>left</code></td>
+   <td><code>0%</code></td>
+  </tr>
+  <tr>
+   <td><code>center</code></td>
+   <td><code>50%</code></td>
+  </tr>
+  <tr>
+   <td><code>right</code></td>
+   <td><code>100%</code></td>
+  </tr>
+  <tr>
+   <td><code>top</code></td>
+   <td><code>0%</code></td>
+  </tr>
+  <tr>
+   <td><code>bottom</code></td>
+   <td><code>100%</code></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Formal_definition" name="Formal_definition">公式定義</h2>
+
+<p>{{CSSInfo}}</p>
+
+<h2 id="Formal_syntax" name="Formal_syntax">形式文法</h2>
+
+<pre class="syntaxbox notranslate">{{csssyntax}}</pre>
+
+<h2 id="Examples" name="Examples">例</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th>コード</th>
+   <th>サンプル</th>
+  </tr>
+  <tr>
+   <td>
+    <p><code>transform: none;</code></p>
+   </td>
+   <td>
+    <div class="hidden" id="transform_none">
+    <pre class="brush: html notranslate">
+&lt;div class="box1"&gt;&amp;nbsp;&lt;/div&gt;
+</pre>
+
+    <pre class="brush: css notranslate">
+.box1 {
+margin: 0.5em;
+width: 3em;
+height: 3em;
+border: solid 1px;
+background-color: palegreen;
+transform: none;
+-webkit-transform: none;
+}
+</pre>
+    </div>
+
+    <div>{{EmbedLiveSample('transform_none', '', 120, '', '', 'no-button') }}</div>
+   </td>
+  </tr>
+  <tr>
+   <td>
+    <p><code>transform: rotate(30deg);</code></p>
+   </td>
+   <td>
+    <div class="hidden" id="transform_rotate_only">
+    <pre class="brush: html notranslate">
+&lt;div class="box2"&gt;&amp;nbsp;&lt;/div&gt;
+</pre>
+
+    <pre class="brush: css notranslate">
+.box2 {
+margin: 0.5em;
+width: 3em;
+height: 3em;
+border: solid 1px;
+background-color: palegreen;
+transform: rotate(30deg);
+-webkit-transform: rotate(30deg);
+}
+</pre>
+    </div>
+
+    <div>{{EmbedLiveSample('transform_rotate_only', '', 120, '', '', 'no-button') }}</div>
+   </td>
+  </tr>
+  <tr>
+   <td>
+    <p><code>transform: rotate(30deg);<br>
+     transform-origin: 0 0;</code></p>
+   </td>
+   <td>
+    <div class="hidden" id="transform_rotate">
+    <pre class="brush: html notranslate">
+&lt;div class="box3"&gt;&amp;nbsp;&lt;/div&gt;
+</pre>
+
+    <pre class="brush: css notranslate">
+.box3 {
+margin: 0.5em;
+width: 3em;
+height: 3em;
+border: solid 1px;
+background-color: palegreen;
+transform-origin: 0 0;
+-webkit-transform-origin: 0 0;
+transform: rotate(30deg);
+-webkit-transform: rotate(30deg);
+}
+</pre>
+    </div>
+
+    <div>{{EmbedLiveSample('transform_rotate', '', 120, '', '', 'no-button') }}</div>
+   </td>
+  </tr>
+  <tr>
+   <td>
+    <p><code>transform: rotate(30deg);<br>
+     transform-origin: 100% 100%;</code></p>
+   </td>
+   <td>
+    <div class="hidden" id="transform_rotate_with_percentage">
+    <pre class="brush: html notranslate">
+&lt;div class="box4"&gt;&amp;nbsp;&lt;/div&gt;
+</pre>
+
+    <pre class="brush: css notranslate">
+.box4 {
+margin: 0.5em;
+width: 3em;
+height: 3em;
+border: solid 1px;
+background-color: palegreen;
+transform-origin: 100% 100%;
+-webkit-transform-origin: 100% 100%;
+transform: rotate(30deg);
+-webkit-transform: rotate(30deg);
+}
+</pre>
+    </div>
+
+    <div>{{EmbedLiveSample('transform_rotate_with_percentage', '', 120, '', '', 'no-button') }}</div>
+   </td>
+  </tr>
+  <tr>
+   <td>
+    <p><code>transform: rotate(30deg);<br>
+     transform-origin: -1em -3em;</code></p>
+   </td>
+   <td>
+    <div class="hidden" id="transform_rotate_with_em">
+    <pre class="brush: html notranslate">
+&lt;div class="box5"&gt;&amp;nbsp;&lt;/div&gt;
+</pre>
+
+    <pre class="brush: css notranslate">
+.box5 {
+margin: 0.5em;
+width: 3em;
+height: 3em;
+border: solid 1px;
+background-color: palegreen;
+transform-origin: -1em -3em;
+-webkit-transform-origin: -1em -3em;
+transform: rotate(30deg);
+-webkit-transform: rotate(30deg);
+}
+</pre>
+    </div>
+
+    <div>{{EmbedLiveSample('transform_rotate_with_em', '', 120, '', '', 'no-button') }}</div>
+   </td>
+  </tr>
+  <tr>
+   <td>
+    <p><code>transform: scale(1.7);</code></p>
+   </td>
+   <td>
+    <div class="hidden" id="transform_scale_only">
+    <pre class="brush: html notranslate">
+&lt;div class="box6"&gt;&amp;nbsp;&lt;/div&gt;
+</pre>
+
+    <pre class="brush: css notranslate">
+.box6 {
+margin: 0.5em;
+width: 3em;
+height: 3em;
+border: solid 1px;
+background-color: palegreen;
+transform: scale(<code>1.7</code>);
+-webkit-transform: scale(<code>1.7</code>);
+}
+</pre>
+    </div>
+
+    <div>{{EmbedLiveSample('transform_scale_only', '', 120, '', '', 'no-button') }}</div>
+   </td>
+  </tr>
+  <tr>
+   <td>
+    <p><code>transform: scale(1.7);<br>
+     transform-origin: 0 0;</code></p>
+   </td>
+   <td>
+    <div class="hidden" id="transform_scale_without_origin">
+    <pre class="brush: html notranslate">
+&lt;div class="box7"&gt;&amp;nbsp;&lt;/div&gt;
+</pre>
+
+    <pre class="brush: css notranslate">
+.box7 {
+margin: 0.5em;
+width: 3em;
+height: 3em;
+border: solid 1px;
+background-color: palegreen;
+transform: scale(<code>1.7</code>);
+-webkit-transform: scale(<code>1.7</code>);
+transform-origin: 0 0;
+-webkit-transform-origin: 0 0;
+}
+</pre>
+    </div>
+
+    <div>{{EmbedLiveSample('transform_scale_without_origin', '', 120, '', '', 'no-button') }}</div>
+   </td>
+  </tr>
+  <tr>
+   <td>
+    <p><code>transform: scale(1.7);<br>
+     transform-origin: 100% -30%;</code></p>
+   </td>
+   <td>
+    <div class="hidden" id="transform_scale">
+    <pre class="brush: html notranslate">
+&lt;div class="box8"&gt;&amp;nbsp;&lt;/div&gt;
+</pre>
+
+    <pre class="brush: css notranslate">
+.box8 {
+margin: 0.5em;
+width: 3em;
+height: 3em;
+border: solid 1px;
+background-color: palegreen;
+transform: scale(<code>1.7</code>);
+-webkit-transform: scale(<code>1.7</code>);
+transform-origin: 100% -30%;
+-webkit-transform-origin: 100% -30%;
+}
+</pre>
+    </div>
+
+    <div>{{EmbedLiveSample('transform_scale', '', 120, '', '', 'no-button') }}</div>
+   </td>
+  </tr>
+  <tr>
+   <td>
+    <p><code>transform: skewX(50deg);<br>
+     transform-origin: 100% -30%;</code></p>
+   </td>
+   <td>
+    <div class="hidden" id="transform_skew_x">
+    <pre class="brush: html notranslate">
+&lt;div class="box9"&gt;&amp;nbsp;&lt;/div&gt;
+</pre>
+
+    <pre class="brush: css notranslate">
+.box9 {
+margin: 0.5em;
+width: 3em;
+height: 3em;
+border: solid 1px;
+background-color: palegreen;
+transform: skewX(50deg);
+-webkit-transform: skewX(50deg);
+transform-origin: 100% -30%;
+-webkit-transform-origin: 100% -30%;
+}
+</pre>
+    </div>
+
+    <div>{{EmbedLiveSample('transform_skew_x', '', 120, '', '', 'no-button') }}</div>
+   </td>
+  </tr>
+  <tr>
+   <td>
+    <p><code>transform: skewY(50deg);<br>
+     transform-origin: 100% -30%;</code></p>
+   </td>
+   <td>
+    <div class="hidden" id="transform_skew_y">
+    <pre class="brush: html notranslate">
+&lt;div class="box10"&gt;&amp;nbsp;&lt;/div&gt;
+</pre>
+
+    <pre class="brush: css notranslate">
+.box10 {
+margin: 0.5em;
+width: 3em;
+height: 3em;
+border: solid 1px;
+background-color: palegreen;
+transform: skewY(50deg);
+-webkit-transform: skewY(50deg);
+transform-origin: 100% -30%;
+-webkit-transform-origin: 100% -30%;
+}
+</pre>
+    </div>
+
+    <div>{{EmbedLiveSample('transform_skew_y', '', 120, '', '', 'no-button') }}</div>
+   </td>
+  </tr>
+ </tbody>
+</table>
+
+<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('CSS3 Transforms', '#transform-origin-property', 'transform-origin') }}</td>
+   <td>{{ Spec2('CSS3 Transforms') }}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2>
+
+<div class="hidden">このページの互換性一覧表は構造化データから生成されています。データに協力していただけるのであれば、 <a class="external" href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> をチェックアウトしてプルリクエストを送信してください。</div>
+
+<p>{{Compat("css.properties.transform-origin")}}</p>
+
+<h2 id="See_also" name="See_also">関連情報</h2>
+
+<ul>
+ <li><a href="/ja/docs/Web/CSS/Using_CSS_transforms">CSS 変形の使用</a></li>
+ <li><a href="https://css-tricks.com/almanac/properties/t/transform-origin/">https://css-tricks.com/almanac/properties/t/transform-origin/</a></li>
+</ul>