initial commit

1 files changed, 139 insertions, 0 deletions

diff --git a/files/zh-cn/web/css/transform-function/skew()/index.html b/files/zh-cn/web/css/transform-function/skew()/index.html
new file mode 100644
index 0000000000..6d5f1f4bf5
--- /dev/null
+++ b/files/zh-cn/web/css/transform-function/skew()/index.html
@@ -0,0 +1,139 @@
+---
+title: skew()
+slug: Web/CSS/transform-function/skew()
+tags:
+  - CSS
+  - CSS变形
+  - CSS方法
+  - 引用
+translation_of: Web/CSS/transform-function/skew()
+---
+<div>{{CSSRef}}</div>
+
+<div><strong><code>skew() </code></strong>函数定义了一个元素在二维平面上的倾斜转换。它的结果是一个{{cssxref("&lt;transform-function&gt;")}} 数据类型</div>
+
+<div>{{EmbedInteractiveExample("pages/css/function-skew.html")}}</div>
+
+<p class="hidden">这个资源的交互案例在GitHub库中，如果您想贡献一个交互的案例，请克隆<a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a>并且通过提交pull request给我们。</p>
+
+<p>这种转换是一种剪切映射(横切)，它在水平和垂直方向上将单元内的每个点扭曲一定的角度。每个点的坐标根据指定的角度以及到原点的距离，进行成比例的值调整；因此，一个点离原点越远，其增加的值就越大。</p>
+
+<h2 id="语法">语法</h2>
+
+<p> <code>skew()</code> 函数指定一个或两个参数，它们表示在每个方向上应用的倾斜量。</p>
+
+<pre class="syntaxbox">skew(<em>ax</em>)
+
+skew(<em>ax</em>, <em>ay</em>)
+</pre>
+
+<h3 id="参数值">参数值</h3>
+
+<dl>
+ <dt><code>ax</code></dt>
+ <dd><code>ax</code> 是一个 {{cssxref("&lt;angle&gt;")}}，表示用于沿横坐标扭曲元素的角度。</dd>
+ <dt><code>ay</code></dt>
+ <dd><code>ay</code> 是一个 {{cssxref("&lt;angle&gt;")}} ，表示用于沿纵坐标扭曲元素的角度。如果未定义，则其默认值为0，导致纯水平倾斜。</dd>
+</dl>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">笛卡儿坐标 ℝ<sup>2</sup></th>
+   <th scope="col">齐次坐标 ℝℙ<sup>2</sup></th>
+   <th scope="col">笛卡儿坐标 ℝ<sup>3</sup></th>
+   <th scope="col">齐次坐标 ℝℙ<sup>3</sup></th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td colspan="1" rowspan="2"><math> <mfenced><mtable><mtr>1<mtd>tan(ax)</mtd></mtr><mtr>tan(ay)<mtd>1</mtd></mtr></mtable> </mfenced> </math></td>
+   <td><math> <mfenced><mtable><mtr>1<mtd>tan(ax)</mtd><mtd>0</mtd></mtr><mtr>tan(ay)<mtd>1</mtd><mtd>0</mtd></mtr><mtr><mtd>0</mtd><mtd>0</mtd><mtd>1</mtd></mtr><mtr></mtr></mtable> </mfenced> </math></td>
+   <td colspan="1" rowspan="2"><math> <mfenced><mtable><mtr>1<mtd>tan(ax)</mtd><mtd>0</mtd></mtr><mtr>tan(ay)<mtd>1</mtd><mtd>0</mtd></mtr><mtr><mtd>0</mtd><mtd>0</mtd><mtd>1</mtd></mtr></mtable> </mfenced> </math></td>
+   <td colspan="1" rowspan="2"><math> <mfenced><mtable><mtr>1<mtd>tan(ax)</mtd><mtd>0</mtd><mtd>0</mtd></mtr><mtr>tan(ay)<mtd>1</mtd><mtd>0</mtd><mtd>0</mtd></mtr><mtr><mtd>0</mtd><mtd>0</mtd><mtd>1</mtd><mtd>0</mtd></mtr><mtr><mtd>0</mtd><mtd>0</mtd><mtd>0</mtd><mtd>1</mtd></mtr></mtable> </mfenced> </math></td>
+  </tr>
+  <tr>
+   <td><code>[1 tan(ay) tan(ax) 1 0 0]</code></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Examples" name="Examples">示例</h2>
+
+<h3 id="Using_a_single_x-angle" name="Using_a_single_x-angle">使用单个参数</h3>
+
+<h4 id="HTML">HTML</h4>
+
+<pre class="brush: html"><code>&lt;div&gt;Normal&lt;/div&gt;
+&lt;div class="skewed"&gt;Skewed&lt;/div&gt;</code></pre>
+
+<h4 id="CSS">CSS</h4>
+
+<pre class="brush: css"><code>div {
+  width: 80px;
+  height: 80px;
+  background-color: skyblue;
+}
+
+.skewed {
+  transform: skew(10deg); /* Equal to skewX(10deg) */
+  background-color: pink;
+}</code></pre>
+
+<h4 id="结果">结果</h4>
+
+<p>{{EmbedLiveSample("Using_a_single_x-angle", 200, 200)}}</p>
+
+<h3 id="Using_two_angles" name="Using_two_angles">使用两个参数</h3>
+
+<h4 id="HTML_2">HTML</h4>
+
+<pre class="brush: html"><code>&lt;div&gt;Normal&lt;/div&gt;
+&lt;div class="skewed"&gt;Skewed&lt;/div&gt;</code></pre>
+
+<h4 id="CSS_2">CSS</h4>
+
+<pre class="brush: css"><code>div {
+  width: 80px;
+  height: 80px;
+  background-color: skyblue;
+}
+
+.skewed {
+  transform: skew(10deg, 10deg);
+  background-color: pink;
+}</code></pre>
+
+<h4 id="结果_2">结果</h4>
+
+<p>{{EmbedLiveSample("Using_two_angles", 200, 200)}}</p>
+
+<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", "#funcdef-transform-skew", "skew()")}}</td>
+   <td>{{Spec2("CSS3 Transforms")}}</td>
+   <td>Initial definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="浏览器兼容">浏览器兼容</h2>
+
+<p>有关兼容性信息，请参阅 <code><a href="/en-US/docs/Web/CSS/transform-function#Browser_compatibility">&lt;transform-function&gt;</a></code> 的数据类型。</p>
+
+<h2 id="另请参阅">另请参阅</h2>
+
+<ul>
+ <li>{{cssxref("transform")}}</li>
+ <li>{{cssxref("&lt;transform-function&gt;")}}</li>
+</ul>