initial commit

1 files changed, 196 insertions, 0 deletions

diff --git a/files/es/web/css/perspective/index.html b/files/es/web/css/perspective/index.html
new file mode 100644
index 0000000000..6ab1d25783
--- /dev/null
+++ b/files/es/web/css/perspective/index.html
@@ -0,0 +1,196 @@
+---
+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>