diff options
Diffstat (limited to 'files/es/web/css/transform/index.html')
| -rw-r--r-- | files/es/web/css/transform/index.html | 240 |
1 files changed, 240 insertions, 0 deletions
diff --git a/files/es/web/css/transform/index.html b/files/es/web/css/transform/index.html new file mode 100644 index 0000000000..5dc3a1a6b2 --- /dev/null +++ b/files/es/web/css/transform/index.html @@ -0,0 +1,240 @@ +--- +title: transform +slug: Web/CSS/transform +tags: + - CSS + - Compatibilidad con los navegadores + - Experimental + - Propiedad CSS + - Referencia + - Transformación +translation_of: Web/CSS/transform +--- +<div>{{CSSRef}}</div> + +<p>La propiedad CSS <code>transform</code> te permite modificar el espacio de coordenadas del modelo de formato visual CSS. Usándola, los elementos pueden ser trasladados, rotados, escalados o sesgados de acuerdo a los valores establecidos.</p> +<div>{{EmbedInteractiveExample("pages/css/transform.html")}}</div> +<p>Si la propiedad tiene un valor diferente a none, se creará un <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Positioning/Understanding_z_index/The_stacking_context">contexto de pila</a>. En ese caso, el objeto actuará como un bloque de contención para los elementos con "position: fixed" que contenga.</p> + + + +<h2 id="Síntaxis">Síntaxis</h2> + +<pre class="brush: css notranslate">/* Keyword values */ +transform: none; + +/* Function values */ +transform: matrix(1.0, 2.0, 3.0, 4.0, 5.0, 6.0); +transform: translate(12px, 50%); +transform: translateX(2em); +transform: translateY(3in); +transform: scale(2, 0.5); +transform: scaleX(2); +transform: scaleY(0.5); +transform: rotate(0.5turn); +transform: skew(30deg, 20deg); +transform: skewX(30deg); +transform: skewY(1.07rad); +transform: matrix3d(1.0, 2.0, 3.0, 4.0, 5.0, 6.0, 7.0, 8.0, 9.0, 10.0, 11.0, 12.0, 13.0, 14.0, 15.0, 16.0); +transform: translate3d(12px, 50%, 3em); +transform: translateZ(2px); +transform: scale3d(2.5, 1.2, 0.3); +transform: scaleZ(0.3); +transform: rotate3d(1, 2.0, 3.0, 10deg); +transform: rotateX(10deg); +transform: rotateY(10deg); +transform: rotateZ(10deg); +transform: perspective(17px); + +/* Multiple function values */ +transform: translateX(10px) rotate(10deg) translateY(5px); + +/* Global values */ +transform: inherit; +transform: initial; +transform: unset;</pre> + +<dl> + <dt> + <h3 id="Valores">Valores</h3> + </dt> + <dt></dt> + <dt><code><transform-function></code></dt> + <dd>Una o más de las <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/transform-function">funciones de transformación CSS</a> que se aplicarán, ver más abajo.</dd> + <dt><code>none</code></dt> + <dd>Especifica que ninguna transformación podrá ser aplicada.</dd> + <dt> + +<p>{{cssinfo}}</p> + <h3 id="Síntasix_formal">Síntasix formal</h3> + + <pre class="syntaxbox notranslate">{{csssyntax}}</pre> + </dt> +</dl> + +<h2 id="Ejemplos">Ejemplos</h2> + +<p>Consulte <a href="https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Using_CSS_transforms">Uso de las transformaciones CSS.</a></p> + +<h2 id="Funciones_CSS_transform">Funciones CSS transform</h2> + +<p>La propiedad CSS <code>transform</code> permite manipular el sistema de coordenadas de un elemento usando las <strong>funciones de transformación</strong>. Estas funciones son descritas a continuación:</p> + +<h3 id="matrix">matrix</h3> + +<pre class="notranslate">transform: matrix(a, c, b, d, tx, ty) +</pre> + +<p>Específica una matriz de transformación 2D compuesta por seis valores a especificar. Esto es el equivalente a la aplicación de una transformación lineal de una matriz <math><semantics><mrow><mo>(</mo><mtable rowspacing="0.5ex"><mtr><mtd><mi>a</mi></mtd><mtd><mi>b</mi></mtd><mtd><mstyle mathvariant="normal"><mrow><mi>t</mi><mi>x</mi></mrow></mstyle></mtd></mtr><mtr><mtd><mi>c</mi></mtd><mtd><mi>d</mi></mtd><mtd><mstyle mathvariant="normal"><mrow><mi>t</mi><mi>y</mi></mrow></mstyle></mtd></mtr><mtr><mtd><mn>0</mn></mtd><mtd><mn>0</mn></mtd><mtd><mn>1</mn></mtd></mtr></mtable><mo>)</mo></mrow><annotation encoding="TeX"> \begin{pmatrix} a & b & \mathrm{tx} \\ c & d & \mathrm{ty} \\ 0 & 0 & 1 \end{pmatrix} </annotation></semantics></math>de un mapa coordenadas de un nuevo sistema de coordenadas en un sistema de coordenadas anterior por las siguientes igualdades de la matriz: <math><semantics><mrow><mrow><mo>(</mo><mtable rowspacing="0.5ex"><mtr><mtd><msub><mi>x</mi><mstyle mathvariant="normal"><mrow><mi>p</mi><mi>r</mi><mi>e</mi><mi>v</mi><mi>C</mi><mi>o</mi><mi>o</mi><mi>r</mi><mi>d</mi><mi>S</mi><mi>y</mi><mi>s</mi></mrow></mstyle></msub></mtd></mtr><mtr><mtd><msub><mi>y</mi><mstyle mathvariant="normal"><mrow><mi>p</mi><mi>r</mi><mi>e</mi><mi>v</mi><mi>C</mi><mi>o</mi><mi>o</mi><mi>r</mi><mi>d</mi><mi>S</mi><mi>y</mi><mi>s</mi></mrow></mstyle></msub></mtd></mtr><mtr><mtd><mn>1</mn></mtd></mtr></mtable><mo>)</mo></mrow><mo>=</mo><mrow><mo>(</mo><mtable rowspacing="0.5ex"><mtr><mtd><mi>a</mi></mtd><mtd><mi>b</mi></mtd><mtd><mstyle mathvariant="normal"><mrow><mi>t</mi><mi>x</mi></mrow></mstyle></mtd></mtr><mtr><mtd><mi>c</mi></mtd><mtd><mi>d</mi></mtd><mtd><mstyle mathvariant="normal"><mrow><mi>t</mi><mi>y</mi></mrow></mstyle></mtd></mtr><mtr><mtd><mn>0</mn></mtd><mtd><mn>0</mn></mtd><mtd><mn>1</mn></mtd></mtr></mtable><mo>)</mo></mrow><mrow><mo>(</mo><mtable rowspacing="0.5ex"><mtr><mtd><msub><mi>x</mi><mstyle mathvariant="normal"><mrow><mi>n</mi><mi>e</mi><mi>w</mi><mi>C</mi><mi>o</mi><mi>o</mi><mi>r</mi><mi>d</mi><mi>S</mi><mi>y</mi><mi>s</mi></mrow></mstyle></msub></mtd></mtr><mtr><mtd><msub><mi>y</mi><mstyle mathvariant="normal"><mrow><mi>n</mi><mi>e</mi><mi>w</mi><mi>C</mi><mi>o</mi><mi>o</mi><mi>r</mi><mi>d</mi><mi>S</mi><mi>y</mi><mi>s</mi></mrow></mstyle></msub></mtd></mtr><mtr><mtd><mn>1</mn></mtd></mtr></mtable><mo>)</mo></mrow><mo>=</mo><mrow><mo>(</mo><mtable rowspacing="0.5ex"><mtr><mtd><mi>a</mi><msub><mi>x</mi><mstyle mathvariant="normal"><mrow><mi>n</mi><mi>e</mi><mi>w</mi><mi>C</mi><mi>o</mi><mi>o</mi><mi>r</mi><mi>d</mi><mi>S</mi><mi>y</mi><mi>s</mi></mrow></mstyle></msub><mo>+</mo><mi>b</mi><msub><mi>y</mi><mstyle mathvariant="normal"><mrow><mi>n</mi><mi>e</mi><mi>w</mi><mi>C</mi><mi>o</mi><mi>o</mi><mi>r</mi><mi>d</mi><mi>S</mi><mi>y</mi><mi>s</mi></mrow></mstyle></msub><mo>+</mo><mstyle mathvariant="normal"><mrow><mi>t</mi><mi>x</mi></mrow></mstyle></mtd></mtr><mtr><mtd><mi>c</mi><msub><mi>x</mi><mstyle mathvariant="normal"><mrow><mi>n</mi><mi>e</mi><mi>w</mi><mi>C</mi><mi>o</mi><mi>o</mi><mi>r</mi><mi>d</mi><mi>S</mi><mi>y</mi><mi>s</mi></mrow></mstyle></msub><mo>+</mo><mi>d</mi><msub><mi>y</mi><mstyle mathvariant="normal"><mrow><mi>n</mi><mi>e</mi><mi>w</mi><mi>C</mi><mi>o</mi><mi>o</mi><mi>r</mi><mi>d</mi><mi>S</mi><mi>y</mi><mi>s</mi></mrow></mstyle></msub><mo>+</mo><mstyle mathvariant="normal"><mrow><mi>t</mi><mi>y</mi></mrow></mstyle></mtd></mtr><mtr><mtd><mn>1</mn></mtd></mtr></mtable><mo>)</mo></mrow></mrow><annotation encoding="TeX"> \begin{pmatrix} x_{\mathrm{prevCoordSys}} \\ y_{\mathrm{prevCoordSys}} \\ 1 \end{pmatrix} = \begin{pmatrix} a & b & \mathrm{tx} \\ c & d & \mathrm{ty} \\ 0 & 0 & 1 \end{pmatrix} \begin{pmatrix} x_{\mathrm{newCoordSys}} \\ y_{\mathrm{newCoordSys}} \\ 1 \end{pmatrix} = \begin{pmatrix} a x_{\mathrm{newCoordSys}} + b y_{\mathrm{newCoordSys}} + \mathrm{tx} \\ c x_{\mathrm{newCoordSys}} + d y_{\mathrm{newCoordSys}} + \mathrm{ty} \\ 1 \end{pmatrix} </annotation></semantics></math></p> + +<div class="note"><strong>Nota:</strong> Viejas versiones de Gecko (Firefox) aceptan un {{cssxref("<length>")}} valor para <strong>tx</strong> y <strong>ty</strong>. Actualmente Gecko, junto con Webkit (Safari, Chrome) y Opera, soportan valor sin unidades {{cssxref("<number>")}} para <strong>tx</strong> y <strong>ty</strong>.</div> + +<h2 id="Ejemplos_realizados">Ejemplos realizados</h2> + +<pre class="notranslate"> background: gold; width: 30em; + + -webkit-transform: matrix(1, -0.2, 0, 1, 0, 0); + -o-transform: matrix(1, -0.2, 0, 1, 0, 0); + transform: matrix(1, -0.2, 0, 1, 0, 0); +</pre> + +<pre class="notranslate"> background: wheat; + max-width: intrinsic; + + -webkit-transform: matrix(1, 0, 0.6, 1, 250, 0); + -o-transform: matrix(1, 0, 0.6, 1, 250, 0); + transform: matrix(1, 0, 0.6, 1, 250, 0); +</pre> + +<h4 id="Información_adicional">Información adicional</h4> + +<ul> + <li><a href="/en-US/docs/Web/SVG/Attribute/transform#General_Transformation">Ejemplo de transformación general de SVG</a></li> + <li><a class="external" href="http://en.wikipedia.org/wiki/Linear_transformation#Examples_of_linear_transformation_matrices">Ejemplos de transformación lineal de matrices</a> Wikipedia</li> + <li><a class="external" href="http://www.mathamazement.com/Lessons/Pre-Calculus/08_Matrices-and-Determinants/coordinate-transformation-matrices.html">Transformación de coordenadas de matrices </a>mathamazement.com</li> + <li><a class="external" href="http://msdn.microsoft.com/en-us/library/ms533014(VS.85,loband).aspx">Filtro matriz de Microsoft</a> MSDN</li> +</ul> + +<h3 id="rotate">rotate</h3> + +<pre class="eval notranslate" dir="rtl">transform: rotate(deg); /* ej. rotate(90deg) */</pre> + +<p>Define una operación de rotación 2D de un elemento, específicando la cantidad de grados (deg) que este rotará en sentido de las<em> </em>macecillas del reloj (según lo especificado por la propiedad <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/transform-origin">transform-origen</a>). La operación corresponde a la matriz <strong>[cos(angle) sin(angle) -sin(angle) cos(angle) 0 0]</strong>.</p> + +<h3 id="rotateX">rotateX</h3> + +<pre class="eval notranslate">transform: rotateX(deg); /* ej. rotateX(90deg) */ </pre> + +<p>Define una operación de rotación 3D de un elemento en el eje X.</p> + +<h3 id="rotateY">rotateY</h3> + +<pre class="eval notranslate">transform: rotateY(deg); /* ej. rotateY(90deg) */ </pre> + +<p>Define una operación de rotación 3D de un elemento en el eje Y.</p> + +<h3 id="rotateZ">rotateZ</h3> + +<pre class="eval notranslate">transform: rotateZ(deg); /* ej. rotateZ(90deg) */ </pre> + +<p>Define una operación de rotación 3D de un elemento en el eje Z.</p> + +<h3 id="scale">scale</h3> + +<pre class="eval notranslate">transform: scale(sx[, sy]); /* ej. scale(2.5, 4)*/</pre> + +<p>Especifica una operación de escalado 2D descrita por <strong>[sx, sy]</strong>.</p> + +<div class="note"> +<p>Nota: Si <strong>sy </strong>no es especificado, se asumirá que tanto <strong>sx </strong>como <strong>sy </strong>tendrán el mismo valor</p> +</div> + +<h3 id="scaleX">scaleX</h3> + +<pre class="eval notranslate">transform: scaleX(sx); /* ej. scale(2.5)*/ </pre> + +<p>Especifica una operación de escalado 2D usando el vector <strong>[sx, 1]</strong>.</p> + +<h3 id="scaleY">scaleY</h3> + +<pre class="eval notranslate">transform: scaleY(sy); /* ej. scale(4)*/ </pre> + +<p>Especifica una operación de escalado 2D usando el vector <strong>[1, sy]</strong>.</p> + +<h3 id="skew">skew</h3> + +<pre class="eval notranslate">transform: skew(ax[, ay]); /* ej. skew(90deg,180deg)*/ </pre> + +<p>Sesga el elemento a lo largo del eje X y Y por los ángulos especificados. Si no se proporciona <strong>ay</strong>, no se llevará a cabo el sesgo del eje Y.</p> + +<div class="note"> +<p>La función skew() fue presentada en los primeros borradores. Esta ha sido removida pero sigue presente en algunas implementaciones. No debe usarse.</p> + +<p>Para lograr el mismo efecto, utilice la función skewX(). Si tu estas usando skew () con un parámetro o matriz (1, tan (ay), tan (ax), 1, 0, 0). Ten en cuenta que tan() no es una función CSS y así que tu mismo tienes que precalcular tus valores.</p> +</div> + +<h3 id="skewX">skewX</h3> + +<pre class="eval notranslate">transform: skewX(deg); /* ej. skew(90deg)*/ </pre> + +<p>Sesga un elemento a lo largo del eje X por el ángulo dado.</p> + +<h3 id="skewY">skewY</h3> + +<pre class="eval notranslate">transform: skewY(deg); /* ej. skew(180deg)*/ </pre> + +<p>Sesga un elemento a lo largo del eje Y por el ángulo dado.</p> + +<h3 id="translate">translate</h3> + +<pre class="eval notranslate">transform: translate(tx[, ty]); /* ej. translate(50px, 100px) */ </pre> + +<p>Especifica una tanslación 2D dada por el vector <strong>[tx, ty]</strong>. Si <strong><code>ty</code> </strong>no es específicada, se asumirá que su valor es cero.</p> + +<p><code>Cada </code><a href="/en-US/docs/translation-value" title="/en-US/docs/translation-value"><code>translation-value</code></a> puede ser un valor de <code><a href="/en-US/docs/CSS/length" title="/en-US/docs/CSS/length">longuitud</a></code> o un valor de <code><a href="/en-US/docs/CSS/percentage" title="/en-US/docs/CSS/percentage">porcentaje</a></code>.</p> + +<h3 id="translateX">translateX</h3> + +<pre class="eval notranslate">transform: translateX(tx); /* ej. translateX(50px) */ </pre> + +<p>Translada un elemento a lo largo del eje X.</p> + +<h3 id="translateY">translateY</h3> + +<pre class="eval notranslate">transform: translateY(ty); /* ej. translateY(100px) */ </pre> + +<p>Translada un elemento a lo largo del eje Y.</p> + +<h2 id="Especificaciones">Especificaciones</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('CSS Transforms 2', '#transform-functions', 'transform')}}</td> + <td>{{Spec2('CSS Transforms 2')}}</td> + <td>Adds 3D transform functions.</td> + </tr> + <tr> + <td>{{SpecName('CSS3 Transforms', '#transform-property', 'transform')}}</td> + <td>{{Spec2('CSS3 Transforms')}}</td> + <td>Initial definition.</td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilidad_con_navegadores">Compatibilidad con navegadores</h2> +<p>{{Compat("css.properties.transform")}}</p> +<h2 id="Véase_También">Véase También</h2> + +<ul> + <li><a href="/en-US/docs/CSS/Using_CSS_transforms" title="/en-US/docs/CSS/Using_CSS_transforms">Uso de transformaciones </a><a href="/en-US/docs/CSS/Using_CSS_transforms" title="/en-US/docs/CSS/Using_CSS_transforms">CSS</a></li> + <li>Tipos de datos <a href="/en-US/docs/translation-value" title="/en-US/docs/translation-value"><translation-value></a></li> + <li> <a class="external" href="http://plugins.jquery.com/project/jquery-transform">Complemento de transformación 2D para jQuery </a>en navegador-cruzado.</li> +</ul> |