files/zh-cn/web/css/transform-function/skew/index.html


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
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("&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>