initial commit

1 files changed, 457 insertions, 0 deletions

diff --git a/files/zh-cn/web/css/transform-origin/index.html b/files/zh-cn/web/css/transform-origin/index.html
new file mode 100644
index 0000000000..c9e578554c
--- /dev/null
+++ b/files/zh-cn/web/css/transform-origin/index.html
@@ -0,0 +1,457 @@
+---
+title: transform-origin
+slug: Web/CSS/transform-origin
+tags:
+  - CSS
+  - CSS Property
+  - CSS Transforms
+translation_of: Web/CSS/transform-origin
+---
+<p>{{ CSSRef }}</p>
+
+<p><strong><code>transform-origin</code></strong> CSS属性让你更改一个元素变形的原点。</p>
+
+<div>{{EmbedInteractiveExample("pages/css/transform-origin.html")}}</div>
+
+
+
+<p>转换起点是应用转换的点。例如，<code style="font-style: normal;">rotate()</code>函数的转换原点是旋转中心。（这个属性的应用原理是先用这个属性的赋值转换该元素，进行变形，然后再用这个属性的值把元素转换回去）</p>
+
+<h2 id="语法">语法</h2>
+
+<pre class="brush: css">/* One-value syntax */
+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;
+
+/* Global values */
+transform-origin: inherit;
+transform-origin: initial;
+transform-origin: unset;
+</pre>
+
+<p><code>transform-origin</code>属性可以使用一个，两个或三个值来指定，其中每个值都表示一个偏移量。 没有明确定义的偏移将重置为其对应的<a href="/zh-CN/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="值">值</h3>
+
+<dl>
+ <dt><em>x-offset</em></dt>
+ <dd>定义变形中心距离盒模型的左侧的{{cssxref("&lt;length&gt;")}}或{{cssxref("&lt;percentage&gt;")}}偏移值。</dd>
+ <dt><em>offset-keyword</em></dt>
+ <dd><code>left<font face="Open Sans, sans-serif">，</font></code><code>right，</code><code>top<font face="Open Sans, sans-serif">，</font></code><code>bottom<font face="Open Sans, sans-serif">或</font></code><code>center中之一，定义相对应的变形中心偏移。</code></dd>
+ <dt><em>y-offset</em></dt>
+ <dd>定义变形中心距离盒模型的顶的{{cssxref("&lt;length&gt;")}}或{{cssxref("&lt;percentage&gt;")}}偏移值。</dd>
+ <dt><em>x-offset-keyword</em></dt>
+ <dd><code>left<font face="Open Sans, sans-serif">，</font></code><code>right</code><code><font face="Open Sans, sans-serif">或</font></code><code>center中之一，定义相对应的变形中心偏移。</code></dd>
+ <dt><em>y-offset-keyword</em></dt>
+ <dd><code>top<font face="Open Sans, sans-serif">，</font></code><code>bottom<font face="Open Sans, sans-serif">或</font></code><code>center中之一，定义相对应的变形中心偏移。</code></dd>
+ <dt><em>z-offset</em></dt>
+ <dd>定义变形中心距离用户视线（z=0处）的{{cssxref("&lt;length&gt;")}}（不能是{{cssxref("&lt;percentage&gt;")}}）偏移值。</dd>
+</dl>
+
+<p>关键字是方便的简写方法，等同于以下{{cssxref("&lt;percentage&gt;")}}值：</p>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">keyword</th>
+   <th scope="col">value</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>
+
+<h3 id="正式语法">正式语法</h3>
+
+<pre>{{csssyntax}}</pre>
+
+<h2 id="示例">示例</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th>Code</th>
+   <th>Sample</th>
+  </tr>
+  <tr>
+   <td>
+    <p><code>transform: none;</code></p>
+   </td>
+   <td>
+    <div class="hidden" id="transform_none">
+    <pre class="brush: html">
+&lt;div class="box1"&gt;&amp;nbsp;&lt;/div&gt;
+</pre>
+
+    <pre class="brush: css">
+.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">
+&lt;div class="box2"&gt;&amp;nbsp;&lt;/div&gt;
+</pre>
+
+    <pre class="brush: css">
+.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">
+&lt;div class="box3"&gt;&amp;nbsp;&lt;/div&gt;
+</pre>
+
+    <pre class="brush: css">
+.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">
+&lt;div class="box4"&gt;&amp;nbsp;&lt;/div&gt;
+</pre>
+
+    <pre class="brush: css">
+.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">
+&lt;div class="box5"&gt;&amp;nbsp;&lt;/div&gt;
+</pre>
+
+    <pre class="brush: css">
+.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">
+&lt;div class="box6"&gt;&amp;nbsp;&lt;/div&gt;
+</pre>
+
+    <pre class="brush: css">
+.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">
+&lt;div class="box7"&gt;&amp;nbsp;&lt;/div&gt;
+</pre>
+
+    <pre class="brush: css">
+.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">
+&lt;div class="box8"&gt;&amp;nbsp;&lt;/div&gt;
+</pre>
+
+    <pre class="brush: css">
+.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">
+&lt;div class="box9"&gt;&amp;nbsp;&lt;/div&gt;
+</pre>
+
+    <pre class="brush: css">
+.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">
+&lt;div class="box10"&gt;&amp;nbsp;&lt;/div&gt;
+</pre>
+
+    <pre class="brush: css">
+.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="规范">规范</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</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>
+
+<p>{{Cssinfo}}</p>
+
+<h2 id="浏览器兼容"><span style='font-family: x-locale-heading-primary,zillaslab,Palatino,"Palatino Linotype",x-locale-heading-secondary,serif; font-size: 2.33333rem; letter-spacing: -0.00278rem;'>浏览器兼容</span></h2>
+
+
+
+<p>{{Compat("css.properties.transform-origin")}}</p>
+
+<h2 id="参见">参见</h2>
+
+<ul>
+ <li><a href="/en-US/docs/CSS/Using_CSS_transforms" title="/en-US/docs/CSS/Using_CSS_transforms">使用CSS变形</a></li>
+</ul>