diff options
Diffstat (limited to 'files/es/web/css/transform-function')
7 files changed, 902 insertions, 0 deletions
diff --git a/files/es/web/css/transform-function/index.html b/files/es/web/css/transform-function/index.html new file mode 100644 index 0000000000..2e6a49bd81 --- /dev/null +++ b/files/es/web/css/transform-function/index.html @@ -0,0 +1,191 @@ +--- +title: transform-function +slug: Web/CSS/transform-function +tags: + - Transformaciones CSS +translation_of: Web/CSS/transform-function +--- +<p>{{CSSRef}}</p> + +<p>El tipo de dato CSS <code><transform-function></code> denota una función por aplicar a la representación de un elemento para modificarlo. Generalmente, dicha transformación puede ser expresada por matrices, y la imagen resultante puede ser determinada usando multiplicación de matrices en cada punto.</p> + +<h2 id="Coordenadas_para_graficos_2D">Coordenadas para graficos 2D</h2> + +<p><span style="line-height: 1.5;">Existen varios modelos de coordenadas utilizados para describir la transformación. Las más habituales son el sistema de coordenadas cartesiano y las coordenadas homogéneas.</span></p> + +<h3 id="Coordenadas_Cartesianas"><span class="external"><span style="font-size: 1.714285714285714rem;">Coordenadas </span>Cartesianas</span></h3> + +<p><a href="/@api/deki/files/5796/=coord_in_R2.png"><img src="/files/3438/coord_in_R2.png" style="float: right; width: 171px;"></a>En las <a class="external" href="https://es.wikipedia.org/wiki/Coordenadas_cartesianas">Cordenadas cartesianas</a>, cada punto del <a class="external" href="https://es.wikipedia.org/wiki/Geometr%C3%ADa_euclidiana">espacio Euclidiano</a> es descrito usando dos valores, la abscisa y la ordenada. El origen, el <code>(0, 0)</code> es la esquina superior izquierda del elemento. <span style="line-height: 1.5;">A diferencia de la convención geométrica habitual, y como la mayoría de los casos en los gráficos por computadora, el eje y (ordenada) va hacia abajo. Cada punto se describe matemáticamente utilizando la notación vectorial <code>(x, y)</code>.</span></p> + +<p><span style="line-height: 1.5;">Cada función lineal es descrita usando una matriz 2x2 de la siguiente manera:</span></p> + +<div style="text-align: center;"> +<p><math> <mfenced> <mtable> <mtr><mtd>a</mtd><mtd>c</mtd></mtr> <mtr><mtd>b</mtd><mtd>d</mtd></mtr> </mtable> </mfenced> </math></p> +</div> + +<p>Aplicar la transformación consiste en hacer, por cada punto, la multiplicación de matrices entre ambos:</p> + +<div style="text-align: center;"><a href="/@api/deki/files/5799/=transform_functions_generic_transformation_cart.png"><img src="/@api/deki/files/5799/=transform_functions_generic_transformation_cart.png?size=webview" style="height: 32px; width: 189px;"></a>.</div> + +<p>Es posible aplicar varias transformaciones en una fila:</p> + +<div style="text-align: center;"><a href="/@api/deki/files/5800/=transform_functions_transform_composition_cart.png"><img src="/@api/deki/files/5800/=transform_functions_transform_composition_cart.png?size=webview" style="height: 32px; width: 313px;"></a>.</div> + +<p>Con esta notación, es posible describir, y por lo tanto componer, las transformaciones más comunes: rotación, escala o transvección. De hecho, todas las transformaciones que son funciones lineales pueden ser descritas. Una transformación mayor no es lineal y por lo tanto debe ser tratada de forma especial cuando se usa esta notación: traslación. El vector de traslación (tx, ty) debe ser expresado de forma separada, como dos parámetros adicionales.</p> + +<p>Las <a class="external" href="https://es.wikipedia.org/wiki/Coordenadas_homog%C3%A9neas">coordenadas homogéneas</a> de <a class="external" href="https://es.wikipedia.org/wiki/August_M%C3%B6bius">Möbius</a> en <a class="external" href="https://es.wikipedia.org/wiki/Geometr%C3%ADa_proyectiva">geometría proyectiva</a> llevan a transformaciones matriciales de 3x3 que, aunque son más complejas e inusuales para quienes no son especialistas, no sufren de la limitación de traslación, puesto que puede ser expresada como funciones lineales en esta álgebra, quitando la necesidad de casos especiales.</p> + +<h2 id="Funciones_que_definen_transformaciones">Funciones que definen transformaciones</h2> + +<p>Existen varias funciones disponibles para describir transformaciones en CSS. Cada una aplica una operación geométrica, en 2D o 3D:</p> + +<dl> + <dt>{{cssxref("transform-function/matrix","matrix()")}}</dt> + <dd>La función <code>matrix()</code> especifica una matriz de transformación 2D homogénea , comprendida por los seis valores especificados. Los valores constantes de dichas matrices son implícitos, y no son enviados como parámetros; los otros parámetros son descritos en orden de columna principal.</dd> + <dd><code>matrix(a, b, c, d, tx, ty)</code> es la forma reducida de <code>matrix3d(a, b, 0, 0, c, d, 0, 0, 0, 0, 1, 0, tx, ty, 0, 1)</code>.</dd> + <dt>{{cssxref("transform-function/matrix3d","matrix3d()")}}</dt> + <dd>La función <code>matrix3d()</code> describe una transformación 3D como una matriz 4x4 homogénea. Los 16 parámetros son descritos en orden de columna principal.</dd> + <dt>{{cssxref("transform-function/perspective","perspective()")}}</dt> + <dd>La función <code>perspective()</code> define la distancia entre el plano z=0 y el usuario, para dar cierta perspectiva al elemento posicionado en tercera dimensión. Cada elemento 3D con z>0 se vuelve más grande; cada elemento 3D con z<0 se vuelve más pequeño. La magnitud del efecto se determina por el valor de esta propiedad.</dd> + <dt>{{cssxref("transform-function/rotate","rotate()")}}</dt> + <dd>La función <code>rotate()</code> define una transformación que mueve al elemento al rededor de un punto fijo (especificado por la propiedad {{Cssxref("transform-origin")}}) sin deformarlo. La cantidad de movimiento es definida por el ángulo especificado; si es positivo, el movimiento será en sentido de las manecillas del reloj, y si es negativo, será en sentido opuesto. Una rotación de 180° es llamada <em>reflexión de punto</em>.</dd> + <dt>{{cssxref("transform-function/rotate3d","rotate3d()")}}</dt> + <dd>La función <code>rotate3d()</code> describe una transformación que mueve al elemento al rededor de un eje fijo sin deformarlo. La cantidad de movimiento es definido por el ángulo especificado; si es positivo, el movimiento será en sentido de las manecillas del reloj, y si es negativo, será en sentido opuesto. Al contrario de las rotaciones en el plano, la composición de las rotaciones 3D es generalmente no conmutativa; esto significa que el orden en el que se aplican las rotaciones es crucial.</dd> + <dt>{{cssxref("transform-function/rotateX","rotateX()")}}</dt> + <dd>La función <code>rotateX()</code> describe una transformación que mueve el elemento al rededor de su eje de las abscisas sin deformarlo. La cantidad de movimiento es definida por el ángulo especificado; si es positivo, el movimiento será en sentido de las manecillas del reloj, y si es negativo, será en sentido opuesto. El eje de rotación pasa por el origen, definido por la propiedad cssxref("transform-origin") }}.</dd> + <dd><code>rotateX(a)</code> es la forma reducida de <code>rotate3D(1, 0, 0, a)</code>.</dd> + <dt>{{cssxref("transform-function/rotateY","rotateY()")}}</dt> + <dd>La función <code>rotateY()</code> describe una transformación que mueve el elemento al rededor de su eje de las ordenadas sin deformarlo. La cantidad de movimiento es definida por el ángulo especificado; si es positivo, el movimiento será en sentido de las manecillas del reloj, y si es negativo, será en sentido opuesto. El eje de rotación pasa por el origen, definido por la propiedad {{ cssxref("transform-origin") }}.</dd> + <dd><code>rotateY(a)</code> es la forma reducida de <code>rotate3D(0, 1, 0, a)</code>.</dd> + <dt>{{cssxref("transform-function/rotateZ","rotateZ()")}}</dt> + <dd>La función <code>rotateZ()</code> describe una transformación que mueve el elemento al rededor de su eje Z sin deformarlo. La cantidad de movimiento es definida por el ángulo especificado; si es positivo, el movimiento será en sentido de las manecillas del reloj, y si es negativo, será en sentido opuesto. El eje de rotación pasa por el origen, definido por la propiedad {{ cssxref("transform-origin") }}.</dd> + <dd><code>rotateZ(a)</code> es la forma corta de <code>rotate3D(0, 0, 1, a)</code>.</dd> + <dt>{{cssxref("transform-function/scale","scale()")}}</dt> + <dd>La función <code>scale()</code> modifica el tamaño del elemento. Puede aumentar o disminuir su tamaño, y ya que la cantidad de escalada es definida por un vector, puede hacerlo más hacia una dirección que a otra. Esta transformación se caracteriza por un vector cuyas coordenadas definen qué tanto se escalará hacia cada dirección. Si ambas coordenadas del vector son iguales, el ajuste es uniforme, o isotrópico, y la figura del elemento es conservada. En ese caso, la función de escalada define una homotecia.</dd> + <dt>{{cssxref("transform-function/scale3d","scale3d()")}}</dt> + <dd>La función <code>scale3d()</code> modifica el tamaño de un elemento. Siendo que la cantidad de escalada es definida por un vector, puede cambiar el tamaño a diferentes dimensiones en diferentes escalas. Esta transformación se caracteriza por un vector cuyas coordenadas definen qué tanto se escalará hacia cada dirección. Si las tres coordenadas del vector son iguales, el ajuste es uniforme, o isotrópico, y la figura del elemento es conservada. En ese caso, la función de escalada define una homotecia.</dd> + <dt>{{cssxref("transform-function/scaleX","scaleX()")}}</dt> + <dd>La función <code>scaleX()</code> modifica la abscisa de cada punto del elemento con base en un factor constante, excepto si dicho factor es <code>1</code>, en cuyo caso la función es la transformación de identidad. La escalada no es isotrópica y los ángulos del elemento no son conservados. <code>scaleX(-1)</code> define una <a class="external" href="https://en.wikipedia.org/wiki/Axial_symmetry">simetría axial</a> con un eje vertical pasando por el origen (según sea sea especificado en la propiedad {{cssxref("transform-origin")}}).</dd> + <dd><code>scaleX(sx)</code> es la forma corta de <code>scale(sx, 1)</code> o de <code>scale3d(sx, 1, 1)</code>.</dd> + <dt>{{cssxref("transform-function/scaleY","scaleY()")}}</dt> + <dd>La función <code>scaleY()</code> modifica la ordenada de cada punto del elemento con base en un factor constante, excepto si el factor es <code>1</code>, en cuyo caso la función es una transformación de identidad. La escalada no es isotrópica y los ángulos del elemento no son conservados. <code>scaleY(-1)</code> define una <a class="external" href="https://en.wikipedia.org/wiki/Axial_symmetry">simetría axial</a> con un eje horizontal pasando por el origen (según sea especificado en la propiedad {{cssxref("transform-origin")}}).</dd> + <dd><code>scaleY(sy)</code> es la forma corta de <code>scale(1, sy)</code> o de <code>scale3d(1, sy, 1)</code>.</dd> + <dt>{{cssxref("transform-function/scaleZ","scaleZ()")}}</dt> + <dd>La función <code>scaleZ()</code> modifica la coordenada Z de cada punto del elemento con base en un factor constante, excepto si el factor es <code>1</code>, en cuyo caso la función es una transformación de identidad. La escalada no es isotrópica y los ángulos del elemento no son conservados. <code>scaleZ(-1)</code> define una <a class="external" href="https://en.wikipedia.org/wiki/Axial_symmetry">simetría axial</a> al rededor del eje Z, pasando por el origen (según sea especificado en la propiedad {{cssxref("transform-origin")}}).</dd> + <dd><code>scaleZ(sz)</code> es la forma corta de <code>scale3d(1, 1, sz)</code>.</dd> + <dt>{{cssxref("transform-function/skew","skew()")}}</dt> + <dd>La función <code>skew()</code> es un mapeo de cizallamiento, o transvección, distorsionando cada punto del elemento con base en cierto ángulo en cada dirección. Esto se hace incrementando cada coordenada por un valor proporcionado para el ángulo especificado y en distancia hacia el origen. Mientras más lejos del origen, mientras más alejado esté del punto, mayor será el valor que se agrega.</dd> + <dt>{{cssxref("transform-function/skewX","skewX()")}}</dt> + <dd>La función <code>skewX()</code> es una transvección horizontal, que distorsiona cada punto de un elemento con base en cierto ángulo en dirección horizontal. Esto se hace incrementando la coordenada abscisa por un valor proporcionado al ángulo especificado, y en distancia hacia el origen. Mientras más lejos esté del origen, mientras más lejano esté el punto, mayor será el valor que se agrega.</dd> + <dt>{{cssxref("transform-function/skewY","skewY()")}}</dt> + <dd>La función <code>skewY()</code> es una transvección vertical, que distorsiona cada punto de un elemento con base en cierto ángulo en dirección vertical. Esto se hace incrementando la coordenada ordenada por un valor proporcionado al ángulo especificado, y en distancia hacia el origen. Mientras más lejos esté del origen, mientras más lejano esté el punto, mayor será el valor que se agrega.</dd> + <dt>{{cssxref("transform-function/translate","translate()")}}</dt> + <dd>La función <code>translate()</code> mueve la posición del elemento sobre el plano. Esta transformación se caracteriza por un vector cuyas coordenadas definen qué tanto se moverá en cada dirección.</dd> + <dt>{{cssxref("transform-function/translate3d","translate3d()")}}</dt> + <dd>La función <code>translate3d()</code> mueve la posición del elemento dentro de un espacio tridimensional. Esta transformación se caracteriza por un vector tridimensional, cuyas coordenadas definen qué tanto se moverá en cada dirección.</dd> + <dt>{{cssxref("transform-function/translateX","translateX()")}}</dt> + <dd>La función <code>translateX()</code> mueve el elemento horizontalmente sobre el plano. Esta transformación se caracteriza por un valor {{cssxref("<length>")}} que define qué tanto se moverá horizontalmente.</dd> + <dd><code>translateX(tx)</code> es la forma reducida de <code>translate(tx, 0)</code>.</dd> + <dt>{{cssxref("transform-function/translateY","translateY()")}}</dt> + <dd>La función <code>translateY()</code> mueve el elemento verticalmente sobre el plano. Esta transformación se caracteriza por un valor {{cssxref("<length>")}} que define qué tanto se moverá verticalmente.</dd> + <dd><code>translateY(ty)</code> es la forma reducida de <code>translate(0, ty)</code>.</dd> + <dt>{{cssxref("transform-function/translateZ","translateZ()")}}</dt> + <dd>La función <code>translateZ()</code> mueve el elemento a través del eje Z en el espacio tridimensional. Esta transformación se caracteriza por un valor {{cssxref("<length>")}} que define qué tanto se moverá.</dd> + <dd><code>translateZ(tz)</code> es la forma reducida de <code>translate3d(0, 0, tz)</code>.</dd> +</dl> + +<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">Comentarios</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('CSS3 Transforms', '#transform-property', 'transform')}}</td> + <td>{{Spec2('CSS3 Transforms')}}</td> + <td>Definición inicial</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</th> + </tr> + <tr> + <td>Soporte básico</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoDesktop("1.9.1")}}<sup>[1]</sup></td> + <td>9.0<sup>[2]</sup></td> + <td>10.5</td> + <td>3.1</td> + </tr> + <tr> + <td>Soporte de 3D</td> + <td>12.0</td> + <td>{{CompatGeckoDesktop("10.0")}}</td> + <td>10.0</td> + <td>15.0</td> + <td>4.0</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Característica</th> + <th>Android</th> + <th>Chrome for Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Soporte básico</td> + <td>{{CompatAndroid(2.1)}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>11.5</td> + <td>3.2</td> + </tr> + <tr> + <td>Soporte de 3D</td> + <td>{{CompatAndroid(3.0)}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>22</td> + <td>3.2</td> + </tr> + </tbody> +</table> +</div> + +<p>[1] Gecko 14.0 quitó el soporte experimental para <code>skew()</code>, pero se reintrodujo en Gecko 15.0 por razones de compatibilidad. Siendo no estándar, y probablemente removido en el futuro, no se recomienda usarlo.</p> + +<p>Antes de Firefox 16, los valores de traslación de <code>matrix()</code> y <code>matrix3d()</code> podían ser valores {{cssxref("length")}}, además del valor estándar {{cssxref("number")}}.</p> + +<p>[2] Internet Explorer 5.5 y superiores soportan la propiedad exclusiva <a href="https://msdn.microsoft.com/es-es/library/ms533014(VS.85,loband).aspx">Matrix Filter</a>, la cual puede ser usada para lograr un efecto similar.</p> + +<p>Internet Explorer 9.0 e inferiores no tienen soporte para transformaciones 3D. Combinar transformaciones 3D y 2D, como <code>-ms-transform: rotate(10deg) translateZ(0);</code>, hará que la propiedad completa sea descartada.</p> diff --git a/files/es/web/css/transform-function/rotate()/index.html b/files/es/web/css/transform-function/rotate()/index.html new file mode 100644 index 0000000000..65c97a27fc --- /dev/null +++ b/files/es/web/css/transform-function/rotate()/index.html @@ -0,0 +1,79 @@ +--- +title: rotate() +slug: Web/CSS/transform-function/rotate() +tags: + - CSS + - NeedsCompatTable + - Referencia + - Transformaciones CSS +translation_of: Web/CSS/transform-function/rotate() +--- +<div>{{CSSRef}}</div> + +<p>La función <a href="/es/docs/">CSS</a> <code><strong>rotate()</strong></code> define una transformación que gira un elemento alrededor de un punto fijo en un plano 2D sin deformarlo.</p> + +<p>El punto fijo alrededor del cual gira el elemento, mencionado anteriormente, también se conoce como el <strong>origen de transformación</strong>. Se establece de manera predeterminada en el centro del elemento, pero se puede personalizar utilizando la propiedad {{ cssxref("transform-origin") }}.</p> + +<p>La cantidad de rotación generada por la propiedad <code>rotate()</code> se define mediante un {{cssxref("<angle>")}}. Si es positivo, el movimiento serán en el sentido de las agujas del reloj; si es negativo, en sentido contrario a las agujas. Una rotación de 180° se llama centro de simetría.</p> + +<p><img src="https://mdn.mozillademos.org/files/12113/rotate.png" style="height: 175px; width: 258px;"></p> + +<h2 id="Síntaxis">Síntaxis</h2> + +<pre class="syntaxbox notranslate">rotate(<em>a</em>) +</pre> + +<h2 id="Valores">Valores</h2> + +<dl> + <dt><em>a</em></dt> + <dd>es un {{ cssxref("<angle>") }} que representa en ángulo de rotación. Un ángulo positivo representa un rotación en el sentido del reloj y un ángulo negativo representa una rotación en sentido contrario a las agujas del reloj.</dd> +</dl> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Coordenadas cartesianas en ℝ<sup>2</sup></th> + <th scope="col">Coordenadas homgéneas en ℝℙ<sup>2</sup></th> + <th scope="col">Coordinadas cartesianas en ℝ<sup>3</sup></th> + <th scope="col">Coordenadas homgéneas en ℝℙ<sup>3</sup></th> + </tr> + </thead> + <tbody> + <tr> + <td colspan="1" rowspan="2"><math> <mfenced> <mtable> <mtr><mtd>cos(a)</mtd><mtd>-sin(a)</mtd></mtr> <mtr><mtd>sin(a)</mtd><mtd>cos(a)</mtd></mtr></mtable></mfenced></math></td> + <td><math> <mfenced><mtable><mtr><mtd>cos(a)</mtd><mtd>-sin(a)</mtd><mtd>0</mtd></mtr><mtr><mtd>sin(a)</mtd><mtd>cos(a)</mtd><mtd>0</mtd></mtr><mtr><mtd>0</mtd><mtd>0</mtd><mtd>1</mtd></mtr></mtable> </mfenced> </math></td> + <td colspan="1" rowspan="2"><math> <mfenced><mtable><mtr><mtd>cos(a)</mtd><mtd>-sin(a)</mtd><mtd>0</mtd></mtr><mtr><mtd>sin(a)</mtd><mtd>cos(a)</mtd><mtd>0</mtd></mtr><mtr><mtd>0</mtd><mtd>0</mtd><mtd>1</mtd></mtr></mtable> </mfenced> </math></td> + <td colspan="1" rowspan="2"><math> <mfenced><mtable><mtr><mtd>cos(a)</mtd><mtd>-sin(a)</mtd><mtd>0</mtd><mtd>0</mtd></mtr><mtr><mtd>sin(a)</mtd><mtd>cos(a)</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>0</mtd><mtd>1</mtd></mtr></mtable> </mfenced> </math></td> + </tr> + <tr> + <td><code>[cos(a) sin(a) -sin(a) cos(a) 0 0]</code></td> + </tr> + </tbody> +</table> + +<h2 id="Ejemplos">Ejemplos</h2> + +<h3 id="HTML">HTML</h3> + +<pre class="brush: html notranslate"><p>foo</p> +<p class="transformed">bar</p></pre> + +<h3 id="CSS">CSS</h3> + +<pre class="brush: css notranslate">p { + width: 50px; + height: 50px; + background-color: teal; +} + +.transformed{ + /* idéntico a rotateZ(45deg); */ + transform: rotate(45deg); + background-color: blue; +} +</pre> + +<h3 id="Resultado">Resultado</h3> + +<p>{{EmbedLiveSample("Examples","100%","200")}}</p> diff --git a/files/es/web/css/transform-function/rotate3d()/index.html b/files/es/web/css/transform-function/rotate3d()/index.html new file mode 100644 index 0000000000..86c5f44399 --- /dev/null +++ b/files/es/web/css/transform-function/rotate3d()/index.html @@ -0,0 +1,121 @@ +--- +title: rotate3d() +slug: Web/CSS/transform-function/rotate3d() +tags: + - CSS + - Funciones CSS + - Referencia +translation_of: Web/CSS/transform-function/rotate3d() +--- +<div>{{CSSRef}}</div> + +<p>La función <code>rotate3d()</code> de CSS define una transformación que mueve el elemento alrededor de un eje fijo sin deformarlo. La cantidad de movimiento está definida por el ángulo especificado; si es positivo, el movimiento será en el sentido de las agujas del reloj, si es negativo, será contrario a las agujas del reloj.</p> + +<p>En el espacio tridimencional, las rotaciones tienen tres grados de libertad, que describen un ángulo de rotación. El ángulo de rotación está definido por un vector [x, y, z] y pasa por el origen (como lo define la propiedad {{ cssxref("transform-origin") }} de CSS. Si el vector no está <em>normalizado</em>, lo que significa que la suma del cuadrado de sus tres coordenadas no es igual a 1, el mismo será normalizado internamente. Un vector no-normalizable, como es el caso del vector nulo, [0, 0, 0], causará que la rotación no sea aplicada, sin que esto invalide la propiedad CSS en su totalidad.</p> + +<div class="note">Contrario a las rotaciones en el plano, la composición de las rotaciones 3D normalmente no es conmutativa; lo que significa que el orden en el que dichas rotaciones son aplicadas es crucial.</div> + +<h2 id="Sintaxis">Sintaxis</h2> + +<p>La cantidad de rotación creada por <code>rotate3d()</code> está especificada por tres {{cssxref("<number>")}}s y un {{cssxref("<angle>")}}. El <code><number></code>s representa las coordenadas x, y y z del vector, denotando los ejes de la rotación. El <code><angle></code> representa el angulo de rotación; si es positivo el movimiento será en el sentido de las agujas del reloj; si es negativo será en el sentido opuesto.</p> + +<pre class="syntaxbox">rotate3d(<em>x</em>, <em>y</em>, <em>z</em>, <em>a</em>) +</pre> + +<h2 id="Valores">Valores</h2> + +<dl> + <dt><em>x</em></dt> + <dd>Es un {{cssxref("<number>")}} que describe la coordenada-x del vector y denota el eje de rotación.</dd> + <dt><em>y</em></dt> + <dd>Es un {{cssxref("<number>")}} que describe la coordenada-y del vector y denota el eje de rotación.</dd> + <dt><em>z</em></dt> + <dd>Es un {{cssxref("<number>")}} que describe la coordenada-z del vector y denota el eje de rotación.</dd> + <dt><em>a</em></dt> + <dd>Es un {{ cssxref("<angle>") }} que representa el ángulo de rotación. Un valor positivo indica una rotación en el sentido de las agujas del reloj, un valor negativo indica una rotación en sentido contrario a las agujas del reloj.</dd> +</dl> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Coordenadas cartesianas en ℝ<sup>2</sup></th> + <th scope="col">Coordenadas homogéneas en ℝℙ<sup>2</sup></th> + <th scope="col">Coordenadas cartesianas en ℝ<sup>3</sup></th> + <th scope="col">Coordenadas homogéneas en ℝℙ<sup>3</sup></th> + </tr> + </thead> + <tbody> + <tr> + <td colspan="2">Esta transformación aplica al espacio tridimencional y no puede ser representada en el plano.</td> + <td colspan="1"><a href="/@api/deki/files/5987/=transform-functions-rotate3d_cart.png"><img src="/@api/deki/files/5987/=transform-functions-rotate3d_cart.png?size=webview" style="height: 47px; width: 510px;"></a><math> <mfenced><mtable><mtr><mtd>1<mo>+</mo>(1<mo>-</mo>cos(<mi>a</mi>))(<msup><mi>x</mi><mn>2</mn></msup><mo>-</mo>1)</mtd><mtd><mi>z</mi><mo>·</mo>sen(<mi>a</mi>)+<mi>x</mi><mi>y</mi>(1<mo>-</mo>cos(<mi>a</mi>))</mtd><mtd><mo>-</mo><mi>y</mi><mo>·</mo>sen(<mi>a</mi>)<mo>+</mo><mi>x</mi><mi>z</mi><mo>·</mo>(1<mo>-</mo>cos(<mi>a</mi>))</mtd></mtr><mtr><mtd><mo>-</mo><mi>z</mi><mo>·</mo>sen(<mi>a</mi>)<mo>+</mo><mi>x</mi><mi>y</mi><mo>·</mo>(1<mo>-</mo>cos(<mi>a</mi>))</mtd><mtd>1+(1-cos(a))(y2-1)</mtd><mtd><mi>x</mi><mo>·</mo>sen(<mi>a</mi>)<mo>+</mo><mi>y</mi><mi>z</mi><mo>·</mo>(1<mo>-</mo>cos(<mi>a</mi>))</mtd><mtr><mtd>ysin(a) + xz(1-cos(a))</mtd><mtd>-xsin(a)+yz(1-cos(a))</mtd><mtd>1+(1-cos(a))(z2-1)</mtd><mtd>t</mtd></mtr><mtr><mtd>0</mtd><mtd>0</mtd><mtd>0</mtd><mtd>1</mtd></mtr> </mtr></mtable></mfenced></math></td> + <td colspan="1"><a href="/@api/deki/files/5986/=transform-functions-rotate3d_hom4.png"><img src="/@api/deki/files/5986/=transform-functions-rotate3d_hom4.png?size=webview" style="height: 61px; width: 522px;"></a></td> + </tr> + </tbody> +</table> + +<h2 id="Ejemplos">Ejemplos</h2> + +<h3 id="Rotar_sobre_el_eje-X">Rotar sobre el eje-X</h3> + +<h4 id="HTML">HTML</h4> + +<pre class="brush: html"><p>foo</p> +<p class="transformed">bar</p></pre> + +<h4 id="CSS">CSS</h4> + +<pre class="brush: css">p { + width: 50px; + height: 50px; + background-color: teal; +} + +.transformed{ + transform: rotate3d(1,0,0,60deg); + background-color: blue; +} +</pre> + +<h4 id="Resultado">Resultado</h4> + +<p>{{EmbedLiveSample("Rotating_on_the_X-axis","100%","200")}}</p> + +<h3 id="Rotar_sobre_un_eje_personalizado">Rotar sobre un eje personalizado</h3> + +<h4 id="HTML_2">HTML</h4> + +<pre class="brush: html"><p>foo</p> +<p class="transformed">bar</p></pre> + +<h4 id="CSS_2">CSS</h4> + +<pre class="brush: css">p { + width: 50px; + height: 50px; + background-color: teal; +} + +.transformed{ + transform: rotate3d(1, 2, -1, 192deg); + background-color: blue; +} +</pre> + +<h4 id="Resultado_2">Resultado</h4> + +<p>{{EmbedLiveSample("Rotating_on_a_custom_axis","100%","200")}}</p> + +<h2 id="Compatibilidad_con_los_navegadores">Compatibilidad con los navegadores</h2> + +<p>Por favor vea el tipo de datos <code><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/transform-function#Browser_compatibility"><transform-function></a></code> para información sobre compatibilidad.</p> + +<h2 id="Ver_también">Ver también</h2> + +<p> </p> + +<ul> + <li>{{cssxref("transform")}}</li> + <li>{{cssxref("<transform-function>")}}</li> +</ul> + +<p> </p> diff --git a/files/es/web/css/transform-function/scale()/index.html b/files/es/web/css/transform-function/scale()/index.html new file mode 100644 index 0000000000..81a0e24714 --- /dev/null +++ b/files/es/web/css/transform-function/scale()/index.html @@ -0,0 +1,122 @@ +--- +title: scale() +slug: Web/CSS/transform-function/scale() +tags: + - CSS Scale + - scale() + - scaleX() + - scaleY() +translation_of: Web/CSS/transform-function/scale() +--- +<div>{{CSSRef}}</div> + +<p>La función CSS <code>scale()</code> define una transformación que modifica el tamaño de un elemento en el plano 2D. Debido a que la cantidad de escalado está definida por un vector, puede cambiar el tamaño de la dimensiones horizontal y vertical a diferentes escalas. Su resultado es un dato tipo {cssxref("<transform-function>")}} .</p> + +<p><img src="https://mdn.mozillademos.org/files/12115/scale.png" style="height: 325px; width: 392px;"></p> + +<p>Esta transformación de escalado se caracteriza por un vector bidimensional. Sus coordenadas definen cuanto escalamiento se realiza en cada dirección. Sí ambas coordenadas son iguales, la escala es uniforme (isotrópica) y la relación de aspecto del elemento se conserva (esta es una transformación homotética).</p> + +<p>Cuando un valor de coordenadas está fuera del rango [-1, 1], el elemento crece a lo largo de esa dimensión; cuando está dentro, se encoge. Si es negativo, el resultado es un reflejo de punto en esa dimensión. Un valor de 1 no tiene ningún efecto.</p> + +<div class="note">La función scale() solo se escala en 2d. Para escalar en 3D se utiliza la función scale3d() en su lugar.</div> + +<h2 id="Sintaxis">Sintaxis</h2> + +<p>La función scale () se especifica con uno o dos valores, que representan la cantidad de escala que se aplicará en cada dirección.</p> + +<pre class="syntaxbox">scale(<em>sx</em>) scale(<em>sx</em>, <em>sy</em>) +</pre> + +<h2 id="Valores">Valores</h2> + +<dl> + <dt><em>sx</em></dt> + <dd>Es un {{cssxref("<número>")}} representando la abscisa del vector de escala.</dd> + <dt><em>sy</em></dt> + <dd>Es un {{cssxref("<número>")}} representado la ordenada de la escala del vector. Si no está presente, su valor por defecto es <em><strong>sx</strong></em>, llevando a una escala uniforme preservando la curva del elemento.</dd> +</dl> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Coordenadas Cartesianas en ℝ<sup>2</sup></th> + <th scope="col">Coordenadas Homogéneas en ℝℙ<sup>2</sup></th> + <th scope="col">Coordenadas Cartesianas en ℝ<sup>3</sup></th> + <th scope="col">Coordenadas Homogéneas en ℝℙ<sup>3</sup></th> + </tr> + </thead> + <tbody> + <tr> + <td colspan="1" rowspan="2"><math> <mfenced> <mtable> <mtr><mtd>sx</mtd><mtd>0</mtd></mtr> <mtr><mtd>0</mtd><mtd>sy</mtd></mtr> </mtable> </mfenced> </math></td> + <td><math> <mfenced><mtable><mtr>sx<mtd>0</mtd><mtd>0</mtd></mtr><mtr>0<mtd>sy</mtd><mtd>0</mtd></mtr><mtr><mtd>0</mtd><mtd>0</mtd><mtd>1</mtd></mtr></mtable> </mfenced> </math></td> + <td colspan="1" rowspan="2"><math> <mfenced><mtable><mtr>sx<mtd>0</mtd><mtd>0</mtd></mtr><mtr>0<mtd>sy</mtd><mtd>0</mtd></mtr><mtr><mtd>0</mtd><mtd>0</mtd><mtd>1</mtd></mtr></mtable> </mfenced> </math></td> + <td colspan="1" rowspan="2"><math> <mfenced><mtable><mtr>sx<mtd>0</mtd><mtd>0</mtd><mtd>0</mtd></mtr><mtr><mtd>0</mtd><mtd>sy</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>0</mtd><mtd>1</mtd></mtr></mtable> </mfenced> </math></td> + </tr> + <tr> + <td><code>[sx 0 0 sy 0 0]</code></td> + </tr> + </tbody> +</table> + +<h2 id="Ejemplos">Ejemplos</h2> + +<h3 id="Escalar_las_dimensiones_X_e_Y_al_mismo_tiempo">Escalar las dimensiones X e Y al mismo tiempo</h3> + +<h4 id="HTML">HTML</h4> + +<pre class="brush: html"><code><div>Normal</div> +<div class="scaled">Scaled</div></code></pre> + +<h4 id="CSS">CSS</h4> + +<pre class="brush: css"><code>div { + width: 80px; + height: 80px; + background-color: skyblue; +} + +.scaled { + transform: scale(0.7); /* Igual que: scaleX(0.7) scaleY(0.7) */ + background-color: pink; +}</code></pre> + +<h4 id="Resultado">Resultado</h4> + +<p>{{EmbedLiveSample("Scaling_the_X_and_Y_dimensions_together", "200", "200")}}</p> + +<h3 id="Escalando_dimensiones_X_e_Y_por_separado_y_trasladando_el_origen">Escalando dimensiones <em>X</em> e <em>Y</em> por separado y trasladando el origen</h3> + +<h4 id="HTML_2">HTML</h4> + +<pre><code><div>Normal</div> +<div class="scaled">Scaled</div></code></pre> + +<h4 id="CSS_2">CSS</h4> + +<pre><code>div { + width: 80px; + height: 80px; + background-color: skyblue; +} + +.scaled { + transform: scale(2, 0.5); /* Igual que: scaleX(2) scaleY(0.5) */ + transform-origin: left; + background-color: pink; +}</code></pre> + +<h4 id="Resultado_2">Resultado</h4> + +<p>{{EmbedLiveSample("Scaling_X_and_Y_dimensions_separately_and_translating_the_origin", "200", "200")}}</p> + +<h2 id="Compatibilidad_con_navegadores">Compatibilidad con navegadores</h2> + +<p>Please see the <code><a href="/en-US/docs/Web/CSS/transform-function#Browser_compatibility"><transform-function></a></code> data type for compatibility info.</p> + +<h2 id="También_puede_ver">También puede ver</h2> + +<ul> + <li>{{cssxref("transform")}}</li> + <li>{{cssxref("<transform-function>")}}</li> + <li><code><a href="/en-US/docs/Web/CSS/transform-function/scale3d">scale3d()</a></code></li> +</ul> diff --git a/files/es/web/css/transform-function/translate()/index.html b/files/es/web/css/transform-function/translate()/index.html new file mode 100644 index 0000000000..26562a503c --- /dev/null +++ b/files/es/web/css/transform-function/translate()/index.html @@ -0,0 +1,146 @@ +--- +title: translate() +slug: Web/CSS/transform-function/translate() +tags: + - CSS + - CSS Function + - CSS Transforms + - Función CSS + - Referencia +translation_of: Web/CSS/transform-function/translate() +--- +<div>{{CSSRef}}</div> + +<p>La function de <a href="/en-US/docs/Web/CSS">CSS</a> <strong><code>translate()</code></strong> recoloca un elemento en el eje horizontal y/o vertical. Su resultado es de tipo {{cssxref("<transform-function>")}}.</p> + +<p><img src="https://mdn.mozillademos.org/files/12121/translate.png" style="height: 195px; width: 249px;"></p> + +<p>Esta transformacion esta compuesta por un vector bidimensional cuyas coordenadas definen cuanto se movera el elemente en cada dirección.</p> + +<h2 id="Sintaxis">Sintaxis</h2> + +<p>La function <code>translate()</code> esta especificada con uno o dos valores.</p> + +<pre class="syntaxbox notranslate">translate(tx) + +translate(tx, ty) +</pre> + +<h3 id="Valores">Valores</h3> + +<dl> + <dt><code>tx</code></dt> + <dd>Es un {{cssxref("<length>")}} que representa la absisa (coordenada x) del vector de translación.</dd> + <dt><code>ty</code></dt> + <dd>Es un {{cssxref("<length>")}} que representa las ordenadas (coordenada y) del vector de translación. Si no se especifica, su valor es 0. Por ejemplo, <code>translate(2)</code> es equivalente a <code>translate(2, 0)</code>.</dd> +</dl> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Coordenadas cartesianas en ℝ<sup>2</sup></th> + <th scope="col">Coordenadas homogeneas en ℝℙ<sup>2</sup></th> + <th scope="col"> + <p>Coordenadas cartesianas en ℝ<sup>3</sup></p> + </th> + <th scope="col">Coordenadas homogeneas en ℝℙ<sup>3</sup></th> + </tr> + </thead> + <tbody> + <tr> + <td colspan="1" rowspan="2"> + <p>Una translación no es una transformación lineal en ℝ<sup>2</sup> y no puede ser representada usando una matriz de coordenadas cartesianas.</p> + </td> + <td><math> <mfenced><mtable><mtr>1<mtd>0</mtd><mtd>tx</mtd></mtr><mtr>0<mtd>1</mtd><mtd>ty</mtd></mtr><mtr><mtd>0</mtd><mtd>0</mtd><mtd>1</mtd></mtr></mtable> </mfenced> </math></td> + <td colspan="1" rowspan="2"><math> <mfenced><mtable><mtr>1<mtd>0</mtd><mtd>tx</mtd></mtr><mtr>0<mtd>1</mtd><mtd>ty</mtd></mtr><mtr><mtd>0</mtd><mtd>0</mtd><mtd>1</mtd></mtr></mtable> </mfenced> </math></td> + <td colspan="1" rowspan="2"><math> <mfenced><mtable><mtr>1<mtd>0</mtd><mtd>0</mtd><mtd>tx</mtd></mtr><mtr>0<mtd>1</mtd><mtd>0</mtd><mtd>ty</mtd></mtr><mtr><mtd>0</mtd><mtd>0</mtd><mtd>1</mtd><mtd>0</mtd></mtr><mtr><mtd>0</mtd><mtd>0</mtd><mtd>0</mtd><mtd>1</mtd></mtr></mtable> </mfenced> </math></td> + </tr> + <tr> + <td><code>[1 0 0 1 tx ty]</code></td> + </tr> + </tbody> +</table> + +<h2 id="Ejemplos">Ejemplos</h2> + +<h3 id="Translación_en_un_solo_eje">Translación en un solo eje</h3> + +<h4 id="HTML">HTML</h4> + +<pre class="brush: html notranslate"><div>Estático</div> +<div class="moved">Movido</div> +<div>Estático</div></pre> + +<h4 id="CSS">CSS</h4> + +<pre class="brush: css notranslate">div { + width: 60px; + height: 60px; + background-color: skyblue; +} + +.moved { + transform: translate(10px); /* Equivalente a translateX(10px) */ + background-color: pink; +} +</pre> + +<h4 id="Resultado">Resultado</h4> + +<p>{{EmbedLiveSample("Using_a_single-axis_translation", 250, 250)}}</p> + +<h3 id="Translación_combinada_en_los_ejes_X_e_Y">Translación combinada en los ejes X e Y</h3> + +<h4 id="HTML_2">HTML</h4> + +<pre class="brush: html notranslate"><div>Estático</div> +<div class="moved">Movido</div> +<div>Estático</div></pre> + +<h4 id="CSS_2">CSS</h4> + +<pre class="brush: css notranslate">div { + width: 60px; + height: 60px; + background-color: skyblue; +} + +.moved { + transform: translate(10px, 10px); + background-color: pink; +} +</pre> + +<h4 id="Resultado_2">Resultado</h4> + +<p>{{EmbedLiveSample("Combining_y-axis_and_x-axis_translation", 250, 250)}}</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('CSS3 Transforms', '#funcdef-transform-translate', 'translate()')}}</td> + <td>{{Spec2('CSS3 Transforms')}}</td> + <td>Definición inicial</td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilidad_con_navegadores">Compatibilidad con navegadores</h2> + +<p>Ver el tipo de datos <code><a href="/en-US/docs/Web/CSS/transform-function#Browser_compatibility"><transform-function></a></code> para la información de compatibilidad.</p> + +<h2 id="Véase_también">Véase también</h2> + +<ul> + <li>{{cssxref("transform")}}</li> + <li>{{cssxref("<transform-function>")}}</li> +</ul> diff --git a/files/es/web/css/transform-function/translatey()/index.html b/files/es/web/css/transform-function/translatey()/index.html new file mode 100644 index 0000000000..5d01de73be --- /dev/null +++ b/files/es/web/css/transform-function/translatey()/index.html @@ -0,0 +1,117 @@ +--- +title: translateY() +slug: Web/CSS/transform-function/translateY() +tags: + - Funciones CSS + - Referencia + - Transformaciones CSS +translation_of: Web/CSS/transform-function/translateY() +--- +<div>{{CSSRef}}</div> + +<p>La función <strong><code>translateY()</code></strong> de <a href="/en-US/docs/Web/CSS">CSS</a> reposiciona un elemento verticalmente dentro del plano bidimensional. Su resultado es de tipo {{cssxref("<transform-function>")}}.</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/12125/translateY.png" style="height: 195px; width: 243px;"></p> + +<div class="note"> +<p><strong>Nota:</strong> <code>translateY(ty)</code> es equivalente a <code><a href="/en-US/docs/Web/CSS/transform-function/translate">translate</a>(0, ty)</code> o <code><a href="/en-US/docs/Web/CSS/transform-function/translate3d">translate3d</a>(0, ty, 0)</code>.</p> +</div> + +<h2 id="Sintaxis">Sintaxis</h2> + +<pre class="brush: css">/* <length-percentage> values */ +transform: translateY(200px); +transform: translateY(50%); +</pre> + +<h3 id="Valores">Valores</h3> + +<dl> + <dt><code><length-percentage></code></dt> + <dd>El valor es de tipo {{cssxref("<length>")}} o {{cssxref("<percentage>")}}, representando el ordinal del vector de traslación. Un valor en porcentaje es relativo a la altura de la caja de referencia definida por la propiedad {{cssxref("transform-box")}}.</dd> +</dl> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Coordenadas cartesianas en ℝ<sup>2</sup></th> + <th scope="col">Coordenadas homogéneas en ℝℙ<sup>2</sup></th> + <th scope="col">Coordenadas cartesianas en ℝ<sup>3</sup></th> + <th scope="col">Coordenadas homogéneas en ℝℙ<sup>3</sup></th> + </tr> + </thead> + <tbody> + <tr> + <td colspan="1" rowspan="2"> + <p>Una traslación no es una transformación linear en ℝ<sup>2 </sup> y no puede ser representada usando una matriz de coordenada cartesiana.</p> + </td> + <td><math> <mfenced><mtable><mtr>1<mtd>0</mtd><mtd>0</mtd></mtr><mtr>0<mtd>1</mtd><mtd>t</mtd></mtr><mtr><mtd>0</mtd><mtd>0</mtd><mtd>1</mtd></mtr></mtable> </mfenced> </math></td> + <td colspan="1" rowspan="2"><math> <math> <mfenced><mtable><mtr>1<mtd>0</mtd><mtd>0</mtd></mtr><mtr>0<mtd>1</mtd><mtd>t</mtd></mtr><mtr><mtd>0</mtd><mtd>0</mtd><mtd>1</mtd></mtr></mtable> </mfenced> </math></math></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>t</mtd></mtr><mtr><mtd>0</mtd><mtd>0</mtd><mtd>1</mtd><mtd>0</mtd></mtr><mtr><mtd>0</mtd><mtd>0</mtd><mtd>0</mtd><mtd>1</mtd></mtr></mtable> </mfenced> </math></td> + </tr> + <tr> + <td><code>[1 0 0 1 0 t]</code></td> + </tr> + </tbody> +</table> + +<h3 id="Sintaxis_formal">Sintaxis formal</h3> + +<pre class="syntaxbox">translateY({{cssxref("<length-percentage>")}}) +</pre> + +<h2 id="Ejemplos">Ejemplos</h2> + +<h3 id="HTML">HTML</h3> + +<pre class="brush: html"><div>Static</div> +<div class="moved">Moved</div> +<div>Static</div></pre> + +<h3 id="CSS">CSS</h3> + +<pre class="brush: css">div { + width: 60px; + height: 60px; + background-color: skyblue; +} + +.moved { + transform: translateY(10px); + background-color: pink; +} +</pre> + +<h3 id="Resultado">Resultado</h3> + +<p>{{EmbedLiveSample("Ejemplos", 250, 250)}}</p> + +<h2 id="Especificaciones">Especificaciones</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Especificación</th> + <th scope="col">Estatus</th> + <th scope="col">Comentarios</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName("CSS3 Transforms", "#funcdef-transform-translatey", "translateY()")}}</td> + <td>{{Spec2("CSS3 Transforms")}}</td> + <td>Definición inicial</td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilidad_de_navegadores">Compatibilidad de navegadores</h2> + +<p>Por favor, véase el tipo <code><a href="/en-US/docs/Web/CSS/transform-function#Browser_compatibility"><transform-function></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("<transform-function>")}}</li> +</ul> diff --git a/files/es/web/css/transform-function/translatez()/index.html b/files/es/web/css/transform-function/translatez()/index.html new file mode 100644 index 0000000000..75ee9ac918 --- /dev/null +++ b/files/es/web/css/transform-function/translatez()/index.html @@ -0,0 +1,126 @@ +--- +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("<transform-function>")}} tipo de dato.</p> + +<div>{{EmbedInteractiveExample("pages/css/function-translateZ.html")}}</div> + + + +<p>Esta transformación es definida por una {{cssxref("<length>")}} 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("<length>")}} 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"><div>Static</div> +<div class="moved">Moved</div></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"><transform-function></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("<transform-function>")}}</li> +</ul> |