initial commit

1 files changed, 253 insertions, 0 deletions

diff --git a/files/zh-cn/web/css/perspective/index.html b/files/zh-cn/web/css/perspective/index.html
new file mode 100644
index 0000000000..9a34e9d980
--- /dev/null
+++ b/files/zh-cn/web/css/perspective/index.html
@@ -0,0 +1,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&gt;0 的三维元素比正常大，而 z&lt;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;
+
+/* &lt;length&gt; 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>&lt;length&gt;</code></dt>
+ <dd>{{cssxref("&lt;length&gt;")}} 指定观察者距离 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">&lt;table&gt;
+  &lt;tbody&gt;
+    &lt;tr&gt;
+      &lt;th&gt;&lt;code&gt;perspective: 250px;&lt;/code&gt;
+      &lt;/th&gt;
+      &lt;th&gt;&lt;code&gt;perspective: 350px;&lt;/code&gt;
+      &lt;/th&gt;
+    &lt;/tr&gt;
+    &lt;tr&gt;
+      &lt;td&gt;
+        &lt;div class="container"&gt;
+          &lt;div class="cube pers250"&gt;
+            &lt;div class="face front"&gt;1&lt;/div&gt;
+            &lt;div class="face back"&gt;2&lt;/div&gt;
+            &lt;div class="face right"&gt;3&lt;/div&gt;
+            &lt;div class="face left"&gt;4&lt;/div&gt;
+            &lt;div class="face top"&gt;5&lt;/div&gt;
+            &lt;div class="face bottom"&gt;6&lt;/div&gt;
+          &lt;/div&gt;
+        &lt;/div&gt;
+      &lt;/td&gt;
+      &lt;td&gt;
+        &lt;div class="container"&gt;
+          &lt;div class="cube pers350"&gt;
+            &lt;div class="face front"&gt;1&lt;/div&gt;
+            &lt;div class="face back"&gt;2&lt;/div&gt;
+            &lt;div class="face right"&gt;3&lt;/div&gt;
+            &lt;div class="face left"&gt;4&lt;/div&gt;
+            &lt;div class="face top"&gt;5&lt;/div&gt;
+            &lt;div class="face bottom"&gt;6&lt;/div&gt;
+          &lt;/div&gt;
+        &lt;/div&gt;
+      &lt;/td&gt;
+    &lt;/tr&gt;
+    &lt;tr&gt;
+      &lt;th&gt;&lt;code&gt;perspective: 500px;&lt;/code&gt;
+      &lt;/th&gt;
+      &lt;th&gt;&lt;code&gt;perspective: 650px;&lt;/code&gt;
+      &lt;/th&gt;
+    &lt;/tr&gt;
+    &lt;tr&gt;
+      &lt;td&gt;
+        &lt;div class="container"&gt;
+          &lt;div class="cube pers500"&gt;
+            &lt;div class="face front"&gt;1&lt;/div&gt;
+            &lt;div class="face back"&gt;2&lt;/div&gt;
+            &lt;div class="face right"&gt;3&lt;/div&gt;
+            &lt;div class="face left"&gt;4&lt;/div&gt;
+            &lt;div class="face top"&gt;5&lt;/div&gt;
+            &lt;div class="face bottom"&gt;6&lt;/div&gt;
+          &lt;/div&gt;
+        &lt;/div&gt;
+      &lt;/td&gt;
+      &lt;td&gt;
+        &lt;div class="container"&gt;
+          &lt;div class="cube pers650"&gt;
+            &lt;div class="face front"&gt;1&lt;/div&gt;
+            &lt;div class="face back"&gt;2&lt;/div&gt;
+            &lt;div class="face right"&gt;3&lt;/div&gt;
+            &lt;div class="face left"&gt;4&lt;/div&gt;
+            &lt;div class="face top"&gt;5&lt;/div&gt;
+            &lt;div class="face bottom"&gt;6&lt;/div&gt;
+          &lt;/div&gt;
+        &lt;/div&gt;
+      &lt;/td&gt;
+    &lt;/tr&gt;
+  &lt;/tbody&gt;
+&lt;/table&gt;
+</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>