Transformaciones

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
`translate(x, y)`	Traslada el elemento una distancia de x horizontalmente e y verticalmente.
`translateX(x)`	Traslada el elemento una distancia de x horizontalmente.
`translateY(y)`	Traslada el elemento una distancia de y verticalmente.

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
`scale(fx, fy)`	Reescala el elemento a un nuevo tamaño con un factor fx horizontal y un factor fy vertical.
`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.

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
`rotate(deg)`	Establece una rotación 2D en deg grados.
`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.

Con transform: rotate(5deg) realizamos una rotación de 5 grados del elemento. 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 o inclinar un elemento en 2D:

Funciones	Significado
`skew(xdeg, ydeg)`	Establece un ángulo de xdeg en X y ydeg en Y, para una deformación 2D
`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

Mediante transform: skew(10deg, 5deg) podemos hacer una deformación de varios grados, así como realizarla sólo respecto al eje X o eje Y con skewX() y 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 rotacion {
    0% { transform: rotate3d(1, 0, 0, 5deg); }
    100% { transform: rotate3d(1, 1, 0, 220deg); }
  }
  
  .anim {
    background: #000;
    color: #FFF;
    width: 100px;
    animation: rotacion 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.

Recuerda que si estableces varias propiedades transform en el mismo elemento con diferentes funciones de transformación, la segunda sobreescribirá a la anterior. Para evitarlo, puedes emplear múltiples transformaciones separándolas mediante un espacio de esta forma:

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