blob: 7362f1ce0153b39d5626a2bbaf8bc981cc716807 (
plain)
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
|
---
title: skewY()
slug: Web/CSS/transform-function/skewY()
translation_of: Web/CSS/transform-function/skewY()
---
<div>
<p>{{CSSRef}}</p>
<p><strong><code>skewY()</code></strong> 函数定义了一个转换，该转换将元素倾斜到二维平面上的垂直方向。它的结果是一个{{cssxref("<transform-function>")}}数据类型。</p>
<p>{{EmbedInteractiveExample("pages/css/function-skewY.html")}}</p>
<p>这种转换是一种剪切映射(横切)，它在水平和垂直方向上将单元内的每个点扭曲一定的角度。每个点的坐标根据指定的角度以及到原点的距离，进行成比例的值调整；因此，一个点离原点越远，其增加的值就越大。</p>
</div>
<h2 id="语法">语法</h2>
<pre class="syntaxbox notranslate">skewY(a)
</pre>
<h3 id="参数值">参数值</h3>
<dl>
<dt><code>a</code></dt>
</dl>
<dl>
<dd><code>a</code> 是一个 {{cssxref("<angle>")}}，表示元素沿纵坐标扭曲的角度。</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">
<p><math> <mfenced><mtable><mtr>1 <mtd>0</mtd></mtr></mtable></mfenced></math></p>
<p><math><mfenced><mtable><mtr><mtd></mtd></mtr></mtable></mfenced></math><math><mfenced><mtable><mtr><mtd></mtd></mtr><mtr>tan(ax) <mtd>1</mtd></mtr></mtable> </mfenced> </math></p>
</td>
<td>
<p><math> <mfenced><mtable><mtr>1 <mtd>0 </mtd><mtd>0</mtd></mtr></mtable></mfenced></math></p>
<p><math><mfenced><mtable><mtr><mtd></mtd></mtr><mtr>tan(ax) <mtd>1 </mtd><mtd>0</mtd></mtr></mtable></mfenced></math></p>
<p><math><mfenced><mtable><mtr><mtd></mtd></mtr><mtr><mtd>0 </mtd><mtd>0 1</mtd></mtr></mtable> </mfenced></math></p>
</td>
<td colspan="1" rowspan="2">
<p><math> <mfenced><mtable><mtr>1 <mtd>0 </mtd><mtd>0</mtd></mtr></mtable></mfenced></math></p>
<p><math><mfenced><mtable><mtr><mtd></mtd></mtr><mtr>tan(ax) <mtd>1 </mtd><mtd>0</mtd></mtr></mtable></mfenced></math></p>
<p><math><mfenced><mtable><mtr><mtd></mtd></mtr><mtr><mtd>0 </mtd><mtd>0 </mtd><mtd>1</mtd></mtr></mtable> </mfenced> </math></p>
</td>
<td colspan="1" rowspan="2">
<p><math> <mfenced><mtable><mtr>1 <mtd>0 </mtd><mtd>0 </mtd><mtd>0</mtd></mtr></mtable></mfenced></math></p>
<p><math><mfenced><mtable><mtr><mtd></mtd></mtr><mtr>tan(ax) <mtd>1 </mtd><mtd>0 </mtd><mtd>0</mtd></mtr></mtable></mfenced></math></p>
<p><math><mfenced><mtable><mtr><mtd></mtd></mtr><mtr><mtd>0 </mtd><mtd>0 </mtd><mtd>1 </mtd><mtd>0</mtd></mtr></mtable></mfenced></math></p>
<p><math><mfenced><mtable><mtr><mtd></mtd></mtr><mtr><mtd>0 </mtd><mtd>0 </mtd><mtd>0 </mtd><mtd>1</mtd></mtr></mtable> </mfenced> </math></p>
</td>
</tr>
<tr>
<td><code>[1 tan(a) 0 1 0 0]</code></td>
</tr>
</tbody>
</table>
<h2 id="示例">示例</h2>
<h3 id="HTML">HTML</h3>
<pre class="brush: html notranslate"><p>foo</p>
<p class="transformed">bar</p></pre>
<h3 id="CSS">CSS</h3>
<pre class="brush: css notranslate">p {
width: 50px;
height: 50px;
background-color: teal;
}
.transformed {
transform: skewY(40deg);
background-color: blue;
}
</pre>
<h3 id="结果">结果</h3>
<p>{{EmbedLiveSample("示例","100%","250")}}</p>
<h2 id="规范">规范</h2>
<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-skewy", "skewY()")}}</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>
|
