Las transformaciones de objetos han sido una de las mejoras más destacadas del estándar CSS3. Aun vemos pocos ejemplos de su uso, pero es cuestión de tiempo que los programadores y diseñadores los tengan en cuenta.

De por sí, las transformaciones son poco útiles. Su potencial se muestra al combinarlo con efectos y animaciones.

Pero, ¿qué es una transformación? Es modificar los atributos de un objeto (HTML) para cambiar sus propiedades de lugar, ángulo, escala y deformación.

Aplicando transformaciones

La sintaxis de las transformaciones es la siguiente:

Las diferentes transformaciones que podemos utilizar son las siguientes:

Translación:

Es el desplazamiento de un objeto, respecto a la posición de su eje. La función por defecto nos permite especificar en qué dirección se tiene que mover. Pero lo podemos especificar para un solo eje.

El resultado sería este:

El cuadrado gris representa la posición inicial del objeto, que se ha desplazado 100px a la derecha y 10px hacia abajo.

Si solo quisiéramos usar la translación en un eje, podríamos hacerlo usando la instrucción transform:translateX, en el caso del eje X. Igual para los demás.

Rotación:

Permite girar un objeto sobre su eje. Se define en grados, y al igual que las translaciones, permiten especificar un eje en concreto.

El resultado sería este:

[clear]

En este caso, vemos como el cuadrado verde está girado 30 grados respecto al objeto original.

Escalado:

Cambia el tamaño de un objeto, respecto al original. Tiene dos parámetros, el eje X y el eje Y. Si ponemos el mismo valor en ambos casos, haremos un escalado. Pero si ponemos diferentes valores, haremos una deformación.

El resultado sería este:

[clear]

Vemos que al poner un factor de 1.5, el objeto es un 50% mayor que el original. Lo he desplazado a la derecha para poder ver el original a la vez. Recordad que la escala se realiza desde el eje central del objeto.

Deformación:

Hemos visto que haciendo un escalado con valores diferentes para sus ejes, se podía conseguir una deformación. Pero tenemos también otra función para deformar.

El resultado sería este:

[clear]

Se hace la deformación a partir de los dos ejes. En el eje X, se deforma 30 grados, mientras que en el Y se deforma 15.

Conclusiones:

CSS3 nos permite una forma muy sencilla y comprensible de realizar transformaciones a objetos. Los únicos inconvenientes son, como siempre, la compatibilidad entre navegadores, y tener que poner todos los prefijos en las instrucciones, para hacer las funciones compatibles. Recordad que si no ponemos los prefijos (-o-, -ms-, -moz-, -webkit-), no funcionará en ese navegador. O muy probablemente no funcione. Siempre depende de la versión que utilicéis.

Os dejo otro ejemplo de cómo sería una transformación aplicada a un evento, en este caso al pasar por encima con el ratón:

El código sería este:

Nota: La animación se hace mediante la función de transition, que veremos en la próxima entrada que publique.

Transformaciones en CSS3