transform

Sumario

La propiedad CSS transform 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.

Si la propiedad tiene un valor diferente a none, se creará un contexto de pila. En ese caso, el objeto actuará como un bloque de contención para los elementos con "position: fixed" que contenga.

Síntaxis

/* 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;

Valores

 

<transform-function>

Una o más de las funciones de transformación CSS que se aplicarán, ver más abajo.

none

Especifica que ninguna transformación podrá ser aplicada.

Síntasix formal

none | <transform-list>
where 
<transform-list> = <transform-function>+
where 
<transform-function> = <matrix()> | <translate()> | <translateX()> | <translateY()> | <scale()> | <scaleX()> | <scaleY()> | <rotate()> | <skew()> | <skewX()> | <skewY()> | <matrix3d()> | <translate3d()> | <translateZ()> | <scale3d()> | <scaleZ()> | <rotate3d()> | <rotateX()> | <rotateY()> | <rotateZ()> | <perspective()>
where 
<matrix()> = matrix( <number> [, <number> ]{5,5} )
<translate()> = translate( <length-percentage> [, <length-percentage> ]? )
<translateX()> = translateX( <length-percentage> )
<translateY()> = translateY( <length-percentage> )
<scale()> = scale( <number> [, <number> ]? )
<scaleX()> = scaleX( <number> )
<scaleY()> = scaleY( <number> )
<rotate()> = rotate( <angle> )
<skew()> = skew( <angle> [, <angle> ]? )
<skewX()> = skewX( <angle> )
<skewY()> = skewY( <angle> )
<matrix3d()> = matrix3d( <number> [, <number> ]{15,15} )
<translate3d()> = translate3d( <length-percentage> , <length-percentage> , <length> )
<translateZ()> = translateZ( <length> )
<scale3d()> = scale3d( <number> , <number> , <number> )
<scaleZ()> = scaleZ( <number> )
<rotate3d()> = rotate3d( <number> , <number> , <number> , <angle> )
<rotateX()> = rotateX( <angle> )
<rotateY()> = rotateY( <angle> )
<rotateZ()> = rotateZ( <angle> )
<perspective()> = perspective( <length> )
where 
<length-percentage> = <length> | <percentage>

Ejemplos

Consulte Uso de las transformaciones CSS.

Funciones CSS transform

La propiedad CSS transform permite manipular el sistema de coordenadas de un elemento usando las funciones de transformación. Estas funciones son descritas a continuación:

matrix

transform:  matrix(a, c, b, d, tx, ty)

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 $\begin{pmatrix} a & b & \mathrm{tx} \\ c & d & \mathrm{ty} \\ 0 & 0 & 1 \end{pmatrix}$de un  mapa coordenadas de un nuevo sistema de coordenadas en un sistema de coordenadas anterior por las siguientes igualdades de la matriz:  $\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}$

Ejemplos realizados

 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);

 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);

Información adicional

• Ejemplo de transformación general de SVG
• Ejemplos de transformación lineal de matrices Wikipedia
• Transformación de coordenadas de matrices mathamazement.com
• Filtro matriz de Microsoft MSDN

rotate

transform:  rotate(deg);     /* ej. rotate(90deg) */

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 macecillas del reloj (según lo especificado por la propiedad transform-origen). La operación corresponde a la matriz [cos(angle) sin(angle) -sin(angle) cos(angle) 0 0].

rotateX

transform:  rotateX(deg);    /* ej. rotateX(90deg) */       

Define una operación de rotación 3D de un elemento en el eje X.

rotateY

transform:  rotateY(deg);    /* ej. rotateY(90deg) */       

Define una operación de rotación 3D de un elemento en el eje Y.

rotateZ

transform:  rotateZ(deg);    /* ej. rotateZ(90deg) */       

Define una operación de rotación 3D de un elemento en el eje Z.

scale

transform:  scale(sx[, sy]);    /* ej. scale(2.5, 4)*/

Especifica una operación de escalado 2D descrita por [sx, sy].

scaleX

transform:  scaleX(sx);     /* ej. scale(2.5)*/       

Especifica una operación de escalado 2D usando el vector [sx, 1].

scaleY

transform:  scaleY(sy);    /* ej. scale(4)*/              

Especifica una operación de escalado 2D usando el vector [1, sy].

skew

transform:  skew(ax[, ay]);     /* ej. skew(90deg,180deg)*/    

Sesga el elemento a lo largo del eje X y Y por los ángulos especificados. Si no se proporciona ay, no se llevará a cabo el sesgo del eje Y.

skewX

transform:  skewX(deg);     /* ej. skew(90deg)*/        

Sesga un elemento a lo largo del eje X por el ángulo dado.

skewY

transform:  skewY(deg);     /* ej. skew(180deg)*/           

Sesga un elemento a lo largo del eje Y por el ángulo dado.

translate

transform:  translate(tx[, ty]);     /* ej. translate(50px, 100px) */ 

Especifica una tanslación 2D dada por el vector [tx, ty]. Si ty no es específicada, se asumirá que su valor es cero.

Cada translation-value puede ser un valor de longuitud o un valor de  porcentaje.

translateX

transform:  translateX(tx);     /* ej. translateX(50px) */  

Translada un elemento a lo largo del eje X.

translateY

transform:  translateY(ty);     /* ej. translateY(100px) */    

Translada un elemento a lo largo del eje Y.

Especificaciones

Compatibilidad con navegadores

Notas

Véase También

• Uso de transformaciones CSS
• Tipos de datos  <translation-value>
•  Complemento de transformación 2D para jQuery en navegador-cruzado.