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
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
|
---
title: perspective
slug: Web/CSS/perspective
translation_of: Web/CSS/perspective
---
<div>{{CSSRef}}</div>
<p><span class="seoSummary"><a href="/en-US/docs/Web/CSS">CSS</a> 属性 <strong><code>perspective</code></strong>指定了观察者与 z=0 平面的距离，使具有三维位置变换的元素产生透视效果。</span> z>0 的三维元素比正常大，而 z<0 时则比正常小，大小程度由该属性的值决定。</p>
<div>{{EmbedInteractiveExample("pages/css/perspective.html")}}</div>
<p>三维元素在观察者后面的部分不会绘制出来，即 z 轴坐标值大于 <code>perspective</code> 属性值的部分。</p>
<p>默认情况下，<em>消失点</em>位于元素的中心，但是可以通过设置 {{cssxref("perspective-origin")}} 属性来改变其位置。</p>
<p>当该属性值不为 <code>0</code> 和 <code>none</code> 时，会创建新的 <a href="/en-US/docs/Web/CSS/CSS_Positioning/Understanding_z_index/The_stacking_context">层叠上下文</a>。在这种情况下，容器内元素的层叠关系像是使用了 <code>position: fixed</code> 一样。</p>
<h2 id="语法">语法</h2>
<pre class="brush: css">/* Keyword value */
perspective: none;
/* <length> values */
perspective: 20px;
perspective: 3.5em;
/* Global values */
perspective: inherit;
perspective: initial;
perspective: unset;
</pre>
<h3 id="值">值</h3>
<dl>
<dt><code>none</code></dt>
<dd>没有应用 perspective 样式时的默认值.</dd>
<dt><code><length></code></dt>
<dd>{{cssxref("<length>")}} 指定观察者距离 z=0 平面的距离，为元素及其内容应用透视变换。当值为0或负值时，无透视变换。</dd>
</dl>
<h3 id="标准语法">标准语法</h3>
<pre class="syntaxbox">{{csssyntax}}</pre>
<h2 id="举例">举例</h2>
<h3 id="设置视角">设置视角</h3>
<p>此示例显示了一个立方体，其 perspective 设置为不同的值。立方体的收缩由 {{ cssxref("perspective") }} 属性定义。它的值越小，视角越深。</p>
<h4 id="Result">Result</h4>
<p>{{EmbedLiveSample('设置视角', 660, 700)}}</p>
<h4 id="HTML">HTML</h4>
<p>下面的 HTML 创建了同一个立方体的四个副本，perspective 设置为不同的值。</p>
<pre class="brush: html"><table>
<tbody>
<tr>
<th><code>perspective: 250px;</code>
</th>
<th><code>perspective: 350px;</code>
</th>
</tr>
<tr>
<td>
<div class="container">
<div class="cube pers250">
<div class="face front">1</div>
<div class="face back">2</div>
<div class="face right">3</div>
<div class="face left">4</div>
<div class="face top">5</div>
<div class="face bottom">6</div>
</div>
</div>
</td>
<td>
<div class="container">
<div class="cube pers350">
<div class="face front">1</div>
<div class="face back">2</div>
<div class="face right">3</div>
<div class="face left">4</div>
<div class="face top">5</div>
<div class="face bottom">6</div>
</div>
</div>
</td>
</tr>
<tr>
<th><code>perspective: 500px;</code>
</th>
<th><code>perspective: 650px;</code>
</th>
</tr>
<tr>
<td>
<div class="container">
<div class="cube pers500">
<div class="face front">1</div>
<div class="face back">2</div>
<div class="face right">3</div>
<div class="face left">4</div>
<div class="face top">5</div>
<div class="face bottom">6</div>
</div>
</div>
</td>
<td>
<div class="container">
<div class="cube pers650">
<div class="face front">1</div>
<div class="face back">2</div>
<div class="face right">3</div>
<div class="face left">4</div>
<div class="face top">5</div>
<div class="face bottom">6</div>
</div>
</div>
</td>
</tr>
</tbody>
</table>
</pre>
<h4 id="CSS">CSS</h4>
<p>CSS 建立了不同透视距离的 class，还包括容器盒、立方体本身以及它的每个面的 class。</p>
<pre class="brush: css">/* Shorthand classes for different perspective values */
.pers250 {
perspective: 250px;
}
.pers350 {
perspective: 350px;
}
.pers500 {
perspective: 500px;
}
.pers650 {
perspective: 650px;
}
/* Define the container div, the cube div, and a generic face */
.container {
width: 200px;
height: 200px;
margin: 75px 0 0 75px;
border: none;
}
.cube {
width: 100%;
height: 100%;
backface-visibility: visible;
perspective-origin: 150% 150%;
transform-style: preserve-3d;
}
.face {
display: block;
position: absolute;
width: 100px;
height: 100px;
border: none;
line-height: 100px;
font-family: sans-serif;
font-size: 60px;
color: white;
text-align: center;
}
/* Define each face based on direction */
.front {
background: rgba(0, 0, 0, 0.3);
transform: translateZ(50px);
}
.back {
background: rgba(0, 255, 0, 1);
color: black;
transform: rotateY(180deg) translateZ(50px);
}
.right {
background: rgba(196, 0, 0, 0.7);
transform: rotateY(90deg) translateZ(50px);
}
.left {
background: rgba(0, 0, 196, 0.7);
transform: rotateY(-90deg) translateZ(50px);
}
.top {
background: rgba(196, 196, 0, 0.7);
transform: rotateX(90deg) translateZ(50px);
}
.bottom {
background: rgba(196, 0, 196, 0.7);
transform: rotateX(-90deg) translateZ(50px);
}
/* Make the table a little nicer */
th, p, td {
background-color: #EEEEEE;
padding: 10px;
font-family: sans-serif;
text-align: left;
}</pre>
<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('CSS Transforms 2', '#propdef-perspective', 'perspective')}}</td>
<td>{{Spec2('CSS Transforms 2')}}</td>
<td>Initial definition</td>
</tr>
</tbody>
</table>
<p>{{cssinfo}}</p>
<h2 id="浏览器兼容性">浏览器兼容性</h2>
<p>{{Compat("css.properties.perspective")}}</p>
<h2 id="相关连接">相关连接</h2>
<ul>
<li><a href="/en-US/docs/Web/CSS/CSS_Transforms/Using_CSS_transforms">Using CSS Transforms</a></li>
</ul>
|
