---
title: perspective()
slug: Web/CSS/transform-function/perspective
tags:
  - Função CSS
  - Referencia
  - Transformações CSS
translation_of: Web/CSS/transform-function/perspective()
original_slug: Web/CSS/transform-function/perspective()
---
<div>{{CSSRef}}</div>

<p>A função <a href="/en-US/docs/Web/CSS">CSS</a> <strong><code>perspective()</code></strong> define uma transformação que configura a distância entre o usuário e o plano z=0. Seu resultado é um dado do tipo {{cssxref("&lt;transform-function&gt;")}}.</p>

<h2 id="Sintaxe">Sintaxe</h2>

<p>A distância de perspectiva usada por<code>perspective()</code> é especificada por um valor {{cssxref("&lt;length&gt;")}}, que representa a distância entre o usuário e o plano z=0. Um valor positivo faz o elemento parecer mais perto do usuário, e um valor negativo o faz parecer mais longe.</p>

<pre class="syntaxbox notranslate">perspective(d)
</pre>

<h3 id="Valores">Valores</h3>

<dl>
 <dt><em>d</em></dt>
 <dd>É um {{cssxref("&lt;length&gt;")}} representando a distância do usuário até o plano z=0. Se for 0 ou um valor negativo, nenhuma transformação de perspectiva é aplicada.</dd>
</dl>

<table class="standard-table">
 <thead>
  <tr>
   <th scope="col">Coordenadas cartesianas em ℝ<sup>2</sup></th>
   <th scope="col">Coordenadas homogêneas em ℝℙ<sup>2</sup></th>
   <th scope="col">Coordenadas cartesianas em ℝ<sup>3</sup></th>
   <th scope="col">Coordenadas homogêneas em ℝℙ<sup>3</sup></th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <td colspan="2" rowspan="2">
    <p>Essa transformação se aplica ao espaço 3D e não pode ser representada no plano.</p>
   </td>
   <td colspan="1" rowspan="2">Essa não é uma transformação linear em ℝ<sup>3</sup>, e não pode ser representada usando uma matriz de coordenadas cartesianas.</td>
   <td colspan="1" rowspan="2"><math> <mfenced><mtable><mtr>1<mtd>0</mtd><mtd>0</mtd><mtd>0</mtd></mtr><mtr>0<mtd>1</mtd><mtd>0</mtd><mtd>0</mtd></mtr><mtr><mtd>0</mtd><mtd>0</mtd><mtd>1</mtd><mtd>0</mtd></mtr><mtr><mtd>0</mtd><mtd>0</mtd><mtd><mo>−</mo>1<mo>/</mo>d</mtd><mtd>1</mtd></mtr></mtable> </mfenced> </math></td>
  </tr>
 </tbody>
</table>

<h2 id="Exemplos">Exemplos</h2>

<h3 id="HTML">HTML</h3>

<pre class="brush: html notranslate">&lt;p&gt;Sem perspectiva:&lt;/p&gt;
&lt;div class="no-perspective-box"&gt;
  &lt;div class="face front"&gt;A&lt;/div&gt;
  &lt;div class="face top"&gt;B&lt;/div&gt;
  &lt;div class="face left"&gt;C&lt;/div&gt;
&lt;/div&gt;

&lt;p&gt;Com perspectiva (7.5cm):&lt;/p&gt;
&lt;div class="perspective-box"&gt;
  &lt;div class="face front"&gt;A&lt;/div&gt;
  &lt;div class="face top"&gt;B&lt;/div&gt;
  &lt;div class="face left"&gt;C&lt;/div&gt;
&lt;/div&gt;
</pre>

<h3 id="CSS">CSS</h3>

<pre class="brush: css notranslate">.face {
  position: absolute;
  width: 100px;
  height: 100px;
  line-height: 100px;
  font-size: 100px;
  text-align: center;
}

.no-perspective-box {
  width: 100px;
  height: 100px;
  transform-style: preserve-3d;
  transform: rotateX(-15deg) rotateY(15deg);
  margin-left: 100px;
}

.perspective-box {
  width: 100px;
  height: 100px;
  transform-style: preserve-3d;
  transform: perspective(7.5cm) rotateX(-15deg) rotateY(15deg);
  margin-left: 100px;
}

.top {
  background-color: skyblue;
  transform: rotateX(90deg) translate3d(0, 0, 50px);
}

.left {
  background-color: pink;
  transform: rotateY(-90deg) translate3d(0, 0, 50px);
}

.front {
  background-color: limegreen;
  transform: translate3d(0, 0, 50px);
}
</pre>

<h3 id="Resultado">Resultado</h3>

<p>{{ EmbedLiveSample('Examples', '250', '350') }}</p>

<h2 id="Browser_compatibility">Compatibilidade com navegadores</h2>

<p>Veja o tipo de dado <code><a href="/en-US/docs/Web/CSS/transform-function#Browser_compatibility">&lt;transform-function&gt;</a></code> para informações de compatibilidade.</p>

<h2 id="Ver_também">Ver também</h2>

<ul>
 <li>{{cssxref("transform")}}</li>
 <li>{{cssxref("&lt;transform-function&gt;")}}</li>
</ul>