transform

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.

Valor inicialnone
Applies totransformable elements
Heredableno
Percentagesrefer to the size of bounding box
Valor calculadoas specified, but with relative lengths converted into absolute lengths
Animation typea transform
Creates stacking contextyes

S铆ntasix formal

none | (en-US) <transform-list>

where
<transform-list> = <transform-function>+ (en-US)

where
<transform-function> = <matrix()> | (en-US) <translate()> | (en-US) <translateX()> | (en-US) <translateY()> | (en-US) <scale()> | (en-US) <scaleX()> | (en-US) <scaleY()> | (en-US) <rotate()> | (en-US) <skew()> | (en-US) <skewX()> | (en-US) <skewY()> | (en-US) <matrix3d()> | (en-US) <translate3d()> | (en-US) <translateZ()> | (en-US) <scale3d()> | (en-US) <scaleZ()> | (en-US) <rotate3d()> | (en-US) <rotateX()> | (en-US) <rotateY()> | (en-US) <rotateZ()> | (en-US) <perspective()>

where
<matrix()> = matrix( <number># (en-US){ (en-US)6} (en-US) )
<translate()> = translate( <length-percentage> , <length-percentage>? (en-US) )
<translateX()> = translateX( <length-percentage> )
<translateY()> = translateY( <length-percentage> )
<scale()> = scale( <number> , <number>? (en-US) )
<scaleX()> = scaleX( <number> )
<scaleY()> = scaleY( <number> )
<rotate()> = rotate( [ (en-US) <angle> | (en-US) <zero> ] (en-US) )
<skew()> = skew( [ (en-US) <angle> | (en-US) <zero> ] (en-US) , [ (en-US) <angle> | (en-US) <zero> ] (en-US)? (en-US) )
<skewX()> = skewX( [ (en-US) <angle> | (en-US) <zero> ] (en-US) )
<skewY()> = skewY( [ (en-US) <angle> | (en-US) <zero> ] (en-US) )
<matrix3d()> = matrix3d( <number># (en-US){ (en-US)16} (en-US) )
<translate3d()> = translate3d( <length-percentage> , <length-percentage> , <length> )
<translateZ()> = translateZ( <length> )
<scale3d()> = scale3d( <number> , <number> , <number> )
<scaleZ()> = scaleZ( <number> )
<rotate3d()> = rotate3d( <number> , <number> , <number> , [ (en-US) <angle> | (en-US) <zero> ] (en-US) )
<rotateX()> = rotateX( [ (en-US) <angle> | (en-US) <zero> ] (en-US) )
<rotateY()> = rotateY( [ (en-US) <angle> | (en-US) <zero> ] (en-US) )
<rotateZ()> = rotateZ( [ (en-US) <angle> | (en-US) <zero> ] (en-US) )
<perspective()> = perspective( <length> )

where
<length-percentage> = <length> | (en-US) <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 (abtxcdty001) \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:  (xprevCoordSysyprevCoordSys1)=(abtxcdty001)(xnewCoordSysynewCoordSys1)=(axnewCoordSys+bynewCoordSys+txcxnewCoordSys+dynewCoordSys+ty1) \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}

Nota: Viejas versiones de Gecko (Firefox) aceptan un <length> valor para tx y ty. Actualmente Gecko, junto con Webkit (Safari, Chrome) y Opera, soportan valor sin unidades <number> para tx y ty.

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

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].

Nota: Si sy no es especificado, se asumir谩 que tanto sx como sy tendr谩n el mismo valor

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.

La funci贸n skew() fue presentada en los primeros borradores. Esta ha sido removida pero sigue presente en algunas implementaciones. No debe usarse.

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.

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

Specification Status Comment
CSS Transforms Level 2
La definici贸n de 'transform' en esta especificaci贸n.
Editor's Draft Adds 3D transform functions.
CSS Transforms Level 1
La definici贸n de 'transform' en esta especificaci贸n.
Working Draft Initial definition.

Compatibilidad con navegadores

BCD tables only load in the browser

V茅ase Tambi茅n