path: root/files/es/web/css/transform/index.html

---
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>&lt;transform-function&gt;</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 &amp; b &amp; \mathrm{tx} \\ c &amp; d &amp; \mathrm{ty} \\ 0 &amp; 0 &amp; 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 &amp; b &amp; \mathrm{tx} \\ c &amp; d &amp; \mathrm{ty} \\ 0 &amp; 0 &amp; 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("&lt;length&gt;")}} valor para <strong>tx</strong> y <strong>ty</strong>. Actualmente Gecko, junto con Webkit (Safari, Chrome) y Opera, soportan valor sin unidades {{cssxref("&lt;number&gt;")}} 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">&lt;translation-value&gt;</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>