---
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>

{{csssyntax}}

<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>