Transformaciones CSS

Las transformaciones es uno de los elementos más interesantes que se introducen en CSS3 para convertir el lenguaje de hojas de estilo en un sistema capaz de realizar todo tipo de efectos visuales, incluido 2D y 3D. Las propiedades principales para realizar transformaciones son las siguientes:

Comencemos por la propiedad transform, mediante la cual podemos indicar una o varias transformaciones para realizar sobre un elemento, ya sean 2D (sobre dos ejes) o 3D (sobre tres ejes).

Funciones 2D

Existen múltiples propiedades CSS que ofrecen diferentes funcionalidades de transformación en dos dimensiones, que veremos a continuación:

Translaciones

Las funciones de translación son aquellas que realizan una transformación en la que mueven un elemento de un lugar a otro. Si especificamos un valor positivo en el eje X (horizontal), lo moveremos hacia la derecha, y si especificamos un valor negativo, lo moveremos hacia la izquierda. Lo mismo con el eje Y (vertical):

Por ejemplo, transform: translate(20px, -30px) traslada el elemento 20 píxeles a la derecha y 30 píxeles hacia arriba, que es equivalente a utilizar transform: translateX(20px) translateY(-30px).

Escalado

Las funciones de escalado realizan una transformación en la que aumentan o reducen el tamaño de un elemento, basándose en el parámetro indicado, que no es más que un factor de escala:

En este ejemplo, transform: scale(2, 2) realiza una transformación de escalado del elemento, ampliándolo al doble de su tamaño original. Si utilizamos scale() con dos parámetros iguales, estamos manteniendo la proporción del elemento, pero si utilizamos diferentes valores, acabaría deformándose.

Rotaciones

Las funciones de rotación simplemente giran el elemento el número de grados indicado:

Con transform: rotate(5deg) realizamos una rotación de 5 grados del elemento sobre si mismo. Utilizando rotateX() y rotateY() podemos hacer lo mismo respecto al eje X o el eje Y respectivamente.

Deformaciones

Por último, las funciones de deformación establecen un ángulo para torcer, tumbar o inclinar un elemento en 2D:

Aunque la función skew() existe, no debería ser utilizada, ya que está marcada como obsoleta y serán retiradas de los navegadores en el futuro. En su lugar deberían utilizarse skewX() o skewY().

Funciones 3D

Sin embargo, esto no es todo. A las funciones anteriores, también podemos añadir las funciones equivalentes de CSS para hacer uso del eje Z, o lo que es lo mismo, las tres dimensiones o 3D. Basta con utilizar el eje Z o las funciones específicas de 3D para poner estas animaciones en práctica.

Recordar siempre que el eje X es el eje horizontal, el eje Y es el eje vertical y el eje Z es el eje de profundidad.

Las propiedades de transformación que completarían la colección de transformaciones 2D que vimos anteriormente, son las siguientes:

Veamos un ejemplo con rotate3d():

@keyframes rotation {
  0% {
    transform: rotate3d(1, 0, 0, 5deg);
  }
  100% {
    transform: rotate3d(1, 1, 0, 220deg);
  }
}

.anim {
  background: #000;
  color: #FFF;
  width: 100px;
  animation: rotation 2s ease-in-out 0 infinite alternate none running;
}

Finalmente, se puede utilizar la función matrix() y matrix3d() para obtener transformaciones personalizadas más complejas y específicas. Tienes más información sobre ellas en el artículo Understanding the CSS Transforms Matrix de los desarrolladores del navegador Opera.

Transformaciones múltiples

Recuerda que si estableces varias propiedades transform en el mismo elemento con diferentes funciones de transformación, la segunda propiedad de transformación sobreescribirá a la anterior, como lo haría cualquier propiedad de CSS:

div {
  transform: rotate(5deg);
  transform: scale(2,2);    /* Sobreescribe la anterior */
}

Para evitar este comportamiento, una forma sencilla se basa en emplear múltiples transformaciones separándolas mediante un espacio. En el siguiente ejemplo, aplicamos una función de rotación, una función de escalado y una función de traslación de forma simultánea:

div {
  transform: rotate(5deg) scale(2,2) translate(20px, 40px);
}

Si lo que queremos hacer no es posible realizarlo de esta forma, probablemente lo más apropiado sería guardar los valores en atributos de metadatos como data-tx, data-ty, data-sx, data-sy y data-rz o similares y manipulándolos desde Javascript.

El soporte de estas propiedades es muy bueno en el ecosistema de navegadores actual, por lo que puede utilizarse con seguridad: