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:

Propiedades Formato Significado
transform función1, función2, ... Aplica una o varias funciones de transformación sobre un elemento.
transform-origin Cambia el punto de origen del elemento en una transformación.
transform-style flat | preserve-3d Modifica el tratamiento de los elementos hijos.

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:

Transformaciones CSS

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

Funciones Significado
translateX(x) Traslada el elemento una distancia de x horizontalmente.
translateY(y) Traslada el elemento una distancia de y verticalmente.
translate(x, y) Propiedad de atajo de las dos anteriores.

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:

Funciones Significado
scaleX(fx) Reescala el elemento a un nuevo tamaño con un factor fx horizontal.
scaleY(fy) Reescala el elemento a un nuevo tamaño con un factor fy vertical.
scale(fx, fy) Propiedad de atajo de las dos anteriores.

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:

Funciones Significado
rotateX(xdeg) Establece una rotación 2D en xdeg grados sólo para el eje horizontal X.
rotateY(ydeg) Establece una rotación 2D en ydeg grados sólo para el eje vertical Y.
rotate(deg) Establece una rotación 2D en deg grados sobre si mismo.

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:

Funciones Significado
skewX(xdeg) Establece un ángulo de xdeg para una deformación 2D respecto al eje X
skewY(ydeg) Establece un ángulo de ydeg para una deformación 2D respecto al eje Y

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.

Ejes X, Y, Z

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

Funciones Significado
translateZ(z) Traslada el elemento una distancia de z en el eje de profundidad.
translate3d(x, y, z) Establece una translación 3D, donde aplica los parámetros de a cada eje.
scaleZ(fz) Reescala el elemento a un nuevo tamaño con factor fz de profundidad.
scale3d(fx, fy, fz) Establece un escalado 3D, donde aplica los factores a cada eje.
rotateZ(zdeg) Establece una rotación 2D en zdeg grados sólo para el eje de profundidad Z.
rotate3d(x, y, z, deg) Establece una rotación 3D, aplicando un vector [x, y, z] y el ángulo en deg.
perspective(n) Establece una perspectiva 3D de n
matrix3d(n, n, ...) Establece una matriz de transformación 3D (16 valores)

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:

Manz
Publicado por Manz

Docente, divulgador informático y freelance. Autor de Emezeta.com, es profesor en la Universidad de La Laguna y dirige el curso de Programación web FullStack y Diseño web FrontEnd de EOI en Tenerife (Canarias). En sus ratos libres, busca GIF de gatos en Internet.