diff options
Diffstat (limited to 'files/zh-cn/web/css/transform-function/skew/index.html')
-rw-r--r-- | files/zh-cn/web/css/transform-function/skew/index.html | 140 |
1 files changed, 140 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..4373d3c9bd --- /dev/null +++ b/files/zh-cn/web/css/transform-function/skew/index.html @@ -0,0 +1,140 @@ +--- +title: skew() +slug: Web/CSS/transform-function/skew +tags: + - CSS + - CSS变形 + - CSS方法 + - 引用 +translation_of: Web/CSS/transform-function/skew() +original_slug: Web/CSS/transform-function/skew() +--- +<div>{{CSSRef}}</div> + +<div><strong><code>skew() </code></strong>函数定义了一个元素在二维平面上的倾斜转换。它的结果是一个{{cssxref("<transform-function>")}} 数据类型</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("<angle>")}},表示用于沿横坐标扭曲元素的角度。</dd> + <dt><code>ay</code></dt> + <dd><code>ay</code> 是一个 {{cssxref("<angle>")}} ,表示用于沿纵坐标扭曲元素的角度。如果未定义,则其默认值为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><div>Normal</div> +<div class="skewed">Skewed</div></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><div>Normal</div> +<div class="skewed">Skewed</div></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"><transform-function></a></code> 的数据类型。</p> + +<h2 id="另请参阅">另请参阅</h2> + +<ul> + <li>{{cssxref("transform")}}</li> + <li>{{cssxref("<transform-function>")}}</li> +</ul> |