---
title: perspective
slug: Web/CSS/perspective
tags:
  - CSS
  - Capas
  - Propiedad CSS
  - Referencia
  - Transformaciones CSS
  - Web
  - graficos
translation_of: Web/CSS/perspective
---
<p>{{ CSSRef("CSS Transforms") }} {{ SeeCompatTable() }}</p>

<h2 id="Resumen">Resumen</h2>

<p>La propiedad <code>perspective</code> <a href="/en/CSS" title="CSS">CSS</a> determina la distancia entre el plano z=0 y el usuario para dar algo de perspectiva al elemento 3D posicionado. Cada elemento 3D con z&gt;0 se hace más grande y con z&lt;0 se vuelve más pequeño. La intensidad del efecto es determinado por el valor de esta propiedad.</p>

<p>Parte de los elementos 3D que se encuentran destrás del usuario, es decir que su coordenada del eje z es mayor que el valor de la propiedad perspective de CSS no es dibujada.</p>

<p>La posición de origen que se usará para la transformación es por defecto colocado en el centro del elemento, pero su posición puede ser cambiada usando la propiedad {{ cssxref("perspective-origin") }}.</p>

<p>Usando esta propiedad con un valor diferente a 0 y none se crea un nuevo <a href="/en/CSS/Understanding_z-index/The_stacking_context">contexto de apilamiento</a>.</p>

<p>{{cssinfo}}</p>

<h2 id="Syntax" name="Syntax">Syntax</h2>

<pre class="twopartsyntaxbox"><a href="/en-US/docs/CSS/Value_definition_syntax" title="CSS/Value_definition_syntax">Sintaxis Formal</a>: {{csssyntax("perspective")}}</pre>

<pre>perspective: none
perspective: 20px     /* &lt;longitud&gt; valores */
perspective: 3.5em

perspective: inherited
</pre>

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

<dl>
 <dt><code>none</code></dt>
 <dd>Es una palabra clave que indica que ninguna transformación de perspectiva será aplicada.</dd>
 <dt><code>&lt;length&gt;</code></dt>
 <dd>Es una {{cssxref("&lt;length&gt;")}} dando la distancia desde el usuario al plano z=0. Esta es usada para aplicar una transformación de perspectiva al elemento  y su contenido. Si es 0 o un valor negativo, no se aplica una transformación de la perspectiva.</dd>
</dl>

<h2 id="Examples" name="Examples">Ejemplos</h2>

<div>
<table class="standard-table">
 <tbody>
  <tr>
   <td><code>perspective:250px;</code></td>
   <td><code>perspective:350px;</code></td>
   <td><code>perspective:500px;</code></td>
  </tr>
  <tr>
   <td>
    <div class="container" style="width: 200px; height: 200px; margin: 75px 0 0 75px; border: none;">
    <div class="cube" style="width: 100%; height: 100%; -moz-perspective: 250px; -moz-transform-style: preserve-3d; -moz-perspective-origin: 150% 150%; -webkit-perspective: 250px; -webkit-transform-style: preserve-3d; -webkit-perspective-origin: 150% 150%; perspective: 250px; transform-style: preserve-3d; perspective-origin: 150% 150%;">
    <div class="middle" style="display: block; position: absolute; width: 100px; height: 100px; border: 1px dashed black; line-height: 100px; font-family: arial, sans-serif; font-size: 60px; color: white; text-align: center; background: transparent;">   </div>

    <div class="front" style="">1</div>

    <div class="back" style="">2</div>

    <div class="right" style="">3</div>

    <div class="left" style="">4</div>

    <div class="top" style="">5</div>

    <div class="bottom" style="">6</div>
    </div>
    </div>
   </td>
   <td>
    <div class="container" style="width: 200px; height: 200px; margin: 75px 0 0 75px; border: none;">
    <div class="cube" style="width: 100%; height: 100%; -moz-perspective: 350px; -moz-transform-style: preserve-3d; -moz-perspective-origin: 150% 150%; -webkit-perspective: 350px; -webkit-transform-style: preserve-3d; -webkit-perspective-origin: 150% 150%; perspective: 350px; transform-style: preserve-3d; perspective-origin: 150% 150%;">
    <div class="middle" style="display: block; position: absolute; width: 100px; height: 100px; border: 1px dashed black; line-height: 100px; font-family: arial, sans-serif; font-size: 60px; color: white; text-align: center; background: transparent;">   </div>

    <div class="front" style="">1</div>

    <div class="back" style="">2</div>

    <div class="right" style="">3</div>

    <div class="left" style="">4</div>

    <div class="top" style="">5</div>

    <div class="bottom" style="">6</div>
    </div>
    </div>
   </td>
   <td>
    <div class="container" style="width: 200px; height: 200px; margin: 75px 0 0 75px; border: none;">
    <div class="cube" style="width: 100%; height: 100%; -moz-perspective: 500px; -moz-transform-style: preserve-3d; -moz-perspective-origin: 150% 150%; -webkit-perspective: 500px; -webkit-transform-style: preserve-3d; -webkit-perspective-origin: 150% 150%; perspective: 500px; transform-style: preserve-3d; perspective-origin: 150% 150%;">
    <div class="middle" style="display: block; position: absolute; width: 100px; height: 100px; border: 1px dashed black; line-height: 100px; font-family: arial, sans-serif; font-size: 60px; color: white; text-align: center; background: transparent;">   </div>

    <div class="front" style="">1</div>

    <div class="back" style="">2</div>

    <div class="right" style="">3</div>

    <div class="left" style="">4</div>

    <div class="top" style="">5</div>

    <div class="bottom" style="">6</div>
    </div>
    </div>
   </td>
  </tr>
 </tbody>
</table>
</div>

<h2 id="Specifications" name="Specifications">Especificaciones</h2>

<table class="standard-table">
 <thead>
  <tr>
   <th scope="col">Especifiación</th>
   <th scope="col">Estado</th>
   <th scope="col">Comentario</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <td>{{ Specname('CSS3 Transforms', '#perspective', 'perspective') }}</td>
   <td>{{ Spec2('CSS3 Transforms') }}</td>
   <td> </td>
  </tr>
 </tbody>
</table>

<h2 id="Compatibilidad_de_navegadores">Compatibilidad de navegadores</h2>

<p>{{ CompatibilityTable() }}</p>

<div id="compat-desktop">
<table class="compat-table">
 <tbody>
  <tr>
   <th>Característica</th>
   <th>Chrome</th>
   <th>Firefox (Gecko)</th>
   <th>Internet Explorer</th>
   <th>Opera</th>
   <th>Safari (WebKit)</th>
  </tr>
  <tr>
   <td>Soporte básico</td>
   <td>12{{ property_prefix('-webkit') }}</td>
   <td>{{ CompatGeckoDesktop("10") }}{{ property_prefix('-moz') }}<br>
    {{ CompatGeckoDesktop("16") }}</td>
   <td>10</td>
   <td>15{{ property_prefix('-webkit') }}</td>
   <td>{{ CompatVersionUnknown() }}{{ property_prefix('-webkit') }}</td>
  </tr>
 </tbody>
</table>
</div>

<div id="compat-mobile">
<table class="compat-table">
 <tbody>
  <tr>
   <th>Característica</th>
   <th>Android</th>
   <th>Firefox Mobile (Gecko)</th>
   <th>IE Phone</th>
   <th>Opera Mobile</th>
   <th>Safari Mobile</th>
  </tr>
  <tr>
   <td>Soporte básico</td>
   <td>3.0{{ property_prefix('-webkit') }}</td>
   <td>{{ CompatGeckoMobile("10") }}{{ property_prefix('-moz') }}<br>
    {{ CompatGeckoMobile("16") }}</td>
   <td>{{ CompatUnknown() }}</td>
   <td>{{ CompatNo() }}</td>
   <td>{{ CompatVersionUnknown() }}{{ property_prefix('-webkit') }}</td>
  </tr>
 </tbody>
</table>
</div>

<h2 id="See_also" name="See_also">Ver también</h2>

<ul>
 <li><a href="/en-US/docs/CSS/Using_CSS_transforms" title="/en-US/docs/CSS/Using_CSS_transforms">Usando transformaciones CSS</a></li>
</ul>