diff options
Diffstat (limited to 'files/es/web/css/perspective/index.html')
| -rw-r--r-- | files/es/web/css/perspective/index.html | 196 |
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>0 se hace más grande y con z<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 /* <longitud> 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><length></code></dt> + <dd>Es una {{cssxref("<length>")}} 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> |