aboutsummaryrefslogtreecommitdiff
path: root/files/es/web/css/transform-function/translatez()/index.html
diff options
context:
space:
mode:
authorMDN <actions@users.noreply.github.com>2022-03-19 00:13:08 +0000
committerMDN <actions@users.noreply.github.com>2022-03-19 00:13:08 +0000
commit9bf6693b2edd5281c1577856895c55653a41dc01 (patch)
tree0143e1d1d5c95776e42d8d9afdddedb13a0827c1 /files/es/web/css/transform-function/translatez()/index.html
parent376471eb81e0a3dc263128f834e3c8c22bb9b4d6 (diff)
downloadtranslated-content-9bf6693b2edd5281c1577856895c55653a41dc01.tar.gz
translated-content-9bf6693b2edd5281c1577856895c55653a41dc01.tar.bz2
translated-content-9bf6693b2edd5281c1577856895c55653a41dc01.zip
[CRON] sync translated content
Diffstat (limited to 'files/es/web/css/transform-function/translatez()/index.html')
-rw-r--r--files/es/web/css/transform-function/translatez()/index.html126
1 files changed, 0 insertions, 126 deletions
diff --git a/files/es/web/css/transform-function/translatez()/index.html b/files/es/web/css/transform-function/translatez()/index.html
deleted file mode 100644
index 75ee9ac918..0000000000
--- a/files/es/web/css/transform-function/translatez()/index.html
+++ /dev/null
@@ -1,126 +0,0 @@
----
-title: translateZ()
-slug: Web/CSS/transform-function/translateZ()
-tags:
- - 3D
- - CSS
-translation_of: Web/CSS/transform-function/translateZ()
----
-<div>{{CSSRef}}</div>
-
-<p>La función <strong><code>translateZ()</code></strong> <a href="/en-US/docs/Web/CSS">CSS</a> reposiciona un elemento a lo largo del eje-z (z-axis) en el espacio 3D, es decir, más cerca o mas lejos del espectador. Su resultado es un {{cssxref("&lt;transform-function&gt;")}} tipo de dato.</p>
-
-<div>{{EmbedInteractiveExample("pages/css/function-translateZ.html")}}</div>
-
-
-
-<p>Esta transformación es definida por una {{cssxref("&lt;length&gt;")}} la cual especifica que tan lejos hacia denttro o hacia afuera el elemento o los elementos se mueven.</p>
-
-<p>En los ejemplos interacticos anteriores, <code><a href="/en-US/docs/Web/CSS/perspective">perspective: 550px;</a></code> (para crear un espacio 3D) y <code><a href="/en-US/docs/Web/CSS/transform-style">transform-style: preserve-3d;</a></code> (los elementos hijos, los 6 lados del cubo, estan también posicionados en el espacio 3D), es decir, han sido establecidos en el cubo.</p>
-
-<div class="note">
-<p><strong>Nota:</strong> <code>translateZ(tz)</code> es equivalente a <code><a href="/en-US/docs/Web/CSS/transform-function/translate3d">translate3d</a>(0, 0, tz)</code>.</p>
-</div>
-
-<h2 id="Syntax">Syntax</h2>
-
-<pre class="syntaxbox notranslate">translateZ(tz)
-</pre>
-
-<h3 id="Values">Values</h3>
-
-<dl>
- <dt><code>tz</code></dt>
- <dd>Una {{cssxref("&lt;length&gt;")}} que representa el componente-z del vector. Un valor positivo mueve el elemento hacia el espectador, y un elemento negativo mueve el elemento más lejos.</dd>
-</dl>
-
-<table class="standard-table">
- <thead>
- <tr>
- <th scope="col">Coordenadas Cartesianas en  ℝ<sup>2</sup></th>
- <th scope="col">Coordenadas Homógeneas en ℝℙ<sup>2</sup></th>
- <th scope="col">Coordenadas Cartesianas en ℝ<sup>3</sup></th>
- <th scope="col">Coordenadas Homógeneas enℝℙ<sup>3</sup></th>
- </tr>
- </thead>
- <tbody>
- <tr>
- <td colspan="2" rowspan="2">Esta transformación se aplica al espacio 4D y no puede ser representada en el plano.</td>
- <td colspan="1" rowspan="2">Una traducción no es una transformación lineal en ℝ<sup>3</sup> y no puede ser representada usando una matriz de coordenadas-Cartesianas.</td>
- <td colspan="1" rowspan="2">
- <p><math> <mfenced><mtable><mtr>1 <mtd>0 </mtd><mtd>0 </mtd><mtd>0 </mtd></mtr></mtable></mfenced></math></p>
-
- <p><math><mfenced><mtable><mtr><mtd></mtd></mtr><mtr>0 </mtr></mtable></mfenced></math><math><mfenced><mtable><mtr><mtd>1 </mtd><mtd>0 </mtd><mtd>0</mtd></mtr></mtable></mfenced></math></p>
-
- <p><math><mfenced><mtable><mtr><mtd></mtd></mtr></mtable></mfenced></math><mtd style="">0 </mtd><mtd style="">0 </mtd><mtd style="">1 </mtd><mtd style="">t</mtd></p>
-
- <p><math><mfenced><mtable><mtr><mtd> </mtd></mtr><mtr><mtd>0 </mtd><mtd>0 </mtd><mtd>0 </mtd><mtd>1</mtd></mtr></mtable> </mfenced> </math></p>
- </td>
- </tr>
- </tbody>
-</table>
-
-<h2 id="Ejemplos">Ejemplos</h2>
-
-<p>En este ejemplo, se crean dos cuadros. Uno se coloca normalmente en la página, sin ser traducida en absoluto. El segundo se modifica aplicando perspectiva para crear un espacio 3D, luego se mueve hacia el usuario.</p>
-
-<h3 id="HTML">HTML</h3>
-
-<pre class="brush: html notranslate">&lt;div&gt;Static&lt;/div&gt;
-&lt;div class="moved"&gt;Moved&lt;/div&gt;</pre>
-
-<h3 id="CSS">CSS</h3>
-
-<pre class="brush: css notranslate">div {
- position: relative;
- width: 60px;
- height: 60px;
- left: 100px;
- background-color: skyblue;
-}
-
-.moved {
- transform: perspective(500px) translateZ(200px);
- background-color: pink;
-}
-</pre>
-
-<p>Lo que realmente importa es la clase "movida"; veamos que hace. Primero, la función <code><a href="/en-US/docs/Web/CSS/transform-function/perspective">perspective()</a></code> posiciona al espectador en relación con el plano  que se encuentra donde z=0 (en esencia, la superficie de la pantalla). Un valor de <code>500px</code> significa que el usario es 500 pixels "delante de" las imagenes ubicadas en z=0.</p>
-
-<p>Luego, la función <code>translateZ()</code> mueve el elemento 200 pixeles "hacia afuera" desde la pantalla, hacia el usuario. Esto tiene el efecto de hacer que el elemento parezca más grande cuando se ve en una pantalla 2D, o más cerca cuando se ve usando un auricular VR u otro dispositivo de pantalla 3D.</p>
-
-<h3 id="Resultado">Resultado</h3>
-
-<p>{{EmbedLiveSample("Examples", 250, 250)}}</p>
-
-<p>Si el valor <code>perspective()</code> es menor que el valor <code>translateZ()</code>, como <code>transform: perspective(200px) translateZ(300px);</code> el elemento transformado no será visible ya que está más allá de la vista del usuario. Cuanto menor sea la diferencia entre la pespectiva y los valores de transformación, más cerca estará el usuario del elemento y más grande parecerá el elemento traducido. </p>
-
-<h2 id="Especificaciones">Especificaciones</h2>
-
-<table class="standard-table">
- <thead>
- <tr>
- <th scope="col">Especificación</th>
- <th scope="col">Estado</th>
- <th scope="col">Comentario</th>
- </tr>
- </thead>
- <tbody>
- <tr>
- <td>{{SpecName('CSS Transforms 2', '#transform-functions', 'transform')}}</td>
- <td>{{Spec2('CSS Transforms 2')}}</td>
- <td>Agrega funciones de transformación 3D al CSS Transform estándar.</td>
- </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilidad_con_navegador">Compatibilidad con navegador</h2>
-
-<p>Por favor observe la propiedad <code><a href="/en-US/docs/Web/CSS/transform-function#Browser_compatibility">&lt;transform-function&gt;</a></code> para información de compatibilidad.</p>
-
-<h2 id="Véase_también">Véase también</h2>
-
-<ul>
- <li>{{cssxref("transform")}}</li>
- <li>{{cssxref("&lt;transform-function&gt;")}}</li>
-</ul>