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