Transformaciones 2D CSS

Las transformaciones CSS permite mover, rotar, escalar y sesgar elementos. Una transformación es un efecto que permite que un elemento cambie de forma, tamaño y posición. CSS soporta transformaciones 2D y 3D.

El método translate()

El método translate() mueve elementos de su actual posición, de acuerdo a los parámetros dados por el Eje X y el Eje Y. En el siguiente ejemplo mueve al elemento <div>, 50 pixeles a la derecha y 100 pixeles abajo de su posición actual.

div{
  -ms-transform: translate(50px,100px); /* IE9 */
  -webkit-transform: translate(50px,100px); /* Safari */
  transform: translate(50px,100px);
}

El método rotate()

El método rotate() rota un elemento en sentido de las manecillas del reloj o al contrario según el grado dado. En el siguiente ejemplo se rota el elemento <div> de acuerdo al grado dado.

div {
  -ms-transform: rotate(200deg); /* IE9 */
  -webkit-transform: rotate(200deg); /* Safari */
  transform: rotate(200deg);
}

Usando valores negativos rotará al elemento en contra de las manecillas del reloj. En el siguiente ejemplo se rota al elemento <div> 20 grados en sentido contrario de las manecillas del reloj:

div {
  -ms-transform: rotate(); /* IE9 */
  -webkit-transform: rotate(-200deg); /* Safari */
  transform: rotate(-200degree);
}

El método scale()

El método scale() incrementa o decrementa el tamaño del elemento, de acuerdo a los parámetros dados en width y height. En el siguiente ejemplo se incrementa el elemento <div> a dos veces de su ancho original y a tres veces de su altura original:

div {
  -ms-transform: scale(2,3); /* IE9 */
  -webkit-transform: scale(2,3); /* Safari */
  transform: scale(2,3); 
}

En el siguiente ejemplo decrementamos el elemento <div> a la mitad de su ancho y alto original.

div {
  -ms-transform: scale(0.5,0.5); /* IE9 */
  -webkit-transform: scale(0.5,0,5); /* Safari */
  transform: scale(0.5,0,5);
}

El método skewX()

El método skewX() sesga o desvía un elemento a lo largo del eje X por el ángulo dado. En el siguiente ejemplo se desvía el elemento <div> 20 grados a lo largo del eje X:

div {
  -ms-transform: skewX(20deg); /* IE9 */
  -webkit-transform: skewX(20deg); /* Safari */
  transform: skewX(20deg);
}

El método skewY()

El método skewY() desvía un elemento a lo largo del eje Y por el ángulo dado. En el siguiente ejemplo se desvía el elemento <div> 20 grados a lo largo del eje Y:

div {
  -ms-transform: skewY(20deg); /* IE8 */
  -webkit-transform: skewY(20deg); /* 20deg */
  transform: skewY(20deg);
}

El método skew()

El método skew() desvía un elemento a lo largo de los ejes X y Y por el ángulo dado. En el siguiente ejemplo se desvía el elemento <div> 20 grados a lo largo del eje X y 10 grados a lo largo del eje Y:

div {
  -ms-transform: skew(20deg,10deg); /* IE9 */
  -webkit-transform: skew(20deg,10deg); /* Safari */
  transform: skew(20deg,10deg);
}

Si el segundo parámetro no se especifica, toma el valor 0. Así, el siguiente ejemplo desvía el elemento <div> 20 grados a lo largo del eje X:

div {
  -ms-transform: skew(20deg); /* IE9 */
  -webkit-transform: skew(20deg); /* Safari */
  transform: skew(20deg);
}

El método matrix()

El método matrix() combina todos los métodos de transformaciones en uno solo. Este método toma seis parámetros, conteniendo funciones matemáticas, lo cual permite rotar, escalar, mover (trasladar) y desviar (sesgar) a los elementos. Los parámetros son los siguientes:

matrix( scaleX(), skewY(), skewX(), scaleY(), translateX(), translateY() )

div {
  -ms-transform: matrix(1,-0.3,1,0,0); /* IE9 */
  -webkit-transform: matrix(1,-0.3,1,0,0); /* Safari */
  transform: matrix(1,-0.3,1,0,0);
}

Propiedades de Transformaciones CSS

En la siguiente tabla se listan las propiedades de transformaciones 2D:

Propiedad	Descripción
transform	Aplica a transformaciones 2D o 3D a un elemento.
transform-origin	Permite cambiar la posición a elementos transformados.

Métodos de Transformaciones 2D

Función	Descripción
matrix()	Define una transformación 2D usando una matrix de seis valores.
translate()	Define una transformación 2D moviendo un elemento a lo largo de los ejes X y Y.
translateX()	Define una transformación 2D moviendo un elemento a lo largo del eje X.
translateY()	Define una transformación 2D moviendo un elemento a lo largo del eje Y.
scale()	Define una transformación 2D cambiando un elemento en su ancho y alto.
scaleX()	Define una transformación 2D cambiando un elemento en su ancho.
scaleY()	Define una transformación 2D cambiando un elemento en su altura.
rotate()	Define una transformación 2D rotando un elemento, el angulo es especificado en el parámetro.
skew()	Define una transformación 2D desviando un elemento a lo largo de los ejes X y Y.
skewX()	Define una transformación 2D desviando un elemento a lo largo del eje X.
skewY()	Define una transformación 2D desviando un elemento a lo largo del eje Y.