transform

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.

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

transform = 
  none              |
  <transform-list>  

<transform-list> = 
  <transform-function>+  

Consulte Uso de las transformaciones CSS.

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:

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}$

 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 matricesmathamazement.com
• Filtro matriz de Microsoft MSDN

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

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

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

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

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

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

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

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

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

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

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

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

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

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.

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

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

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

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

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.

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

Translada un elemento a lo largo del eje X.

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

Translada un elemento a lo largo del eje Y.

• Uso de transformacionesCSS
• Tipos de datos <translation-value>
• Complemento de transformación 2D para jQueryen navegador-cruzado.