CSS ofrece un conjunto de propiedades para realizar transformaciones 2D y 3D, permitiendo trabajar gráficos y combinarlo con animaciones o transiciones.

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: pos-x pos-y pos-z 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 de transformación 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 y de 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 factor fx horizontal y factor fy vertical.
scaleX(fx) Reescala el elemento a un nuevo tamaño con factor fx horizontal.
scaleY(fy) Reescala el elemento a un nuevo tamaño con 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 de deg grados.
rotateX(xdeg) Establece una rotación 2D de xdeg grados sólo para el eje horizontal X.
rotateY(ydeg) Establece una rotación 2D de 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 para una deformación 2D
skewX(xdeg) Establece un ángulo para una deformación 2D respecto al eje X
skewY(ydeg) Establece un ángulo 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 de transformación 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 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 de zdeg grados sólo para el eje de profundidad Z.
rotate3d(x, y, z, deg) Establece una rotación 3D, donde aplica a cada eje el número de grados deg.
perspective(n) Establece una perspectiva 3D
matrix3d(n, n, ...) Establece una matriz de transformación 3D (16 valores)

Veamos un ejemplo con rotate3d():

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

.anim {
   position: relative;
   background: #000;
   color: #FFF;
   width: 100px;
   animation: animacion2 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);
}

Manz
Publicado por Manz

Docente, divulgador informático y freelance. Trabaja como autónomo, escribe en Emezeta.com (sitio web de tecnología con +10.000 visitas diarias) y es profesor en la Oficina de Software Libre de la Universidad de La Laguna, en Tenerife (Islas Canarias).