Transformaciones en CSS3

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:

transform: transform-functions;

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.

.translacion {
     transform:translate (100px, 10px;);
     -o-transform:translate (100px, 10px;); /* Para Opera */
     -ms-transform:translate (100px, 10px;); /* Para IE */
     -moz-transform:translate (100px, 10px;); /* Para Firefox */
     -webkit-transform:translate (100px, 10px;); /* Para Safari y Chrome */
}

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.

.rotacion {
     transform:rotate(30deg);
     -o-transform:rotate(30deg); /* Para Opera */
     -ms-transform:rotate(30deg); /* Para IE */
     -moz-transform:rotate(30deg); /* Para Firefox */
     -webkit-transform:rotate(30deg); /* Para Safari y Chrome */
}

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.

.escalado {
     transform:scale(1.5,1.5);
     -o-transform:scale(1.5,1.5); /* Para Opera */
     -ms-transform:scale(1.5,1.5); /* Para IE */
     -moz-transform:scale(1.5,1.5); /* Para Firefox */
     -webkit-transform:scale(1.5,1.5); /* Para Safari y Chrome */
}

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.

.deformar {
     transform:skew(30deg,15deg);
     -o-transform:skew(30deg,15deg); /* Para Opera */
     -ms-transform:skew(30deg,15deg); /* Para IE */
     -moz-transform:skew(30deg,15deg); /* Para Firefox */
     -webkit-transform:skew(30deg,15deg); /* Para Safari y Chrome */
}

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:

.varios:hover {
  transform:rotate(30deg) translate(100px,10px) scale(1.5,1.5);
  -o-transform:rotate(30deg) translate(100px,10px) scale(1.5,1.5);
  -ms-transform:rotate(30deg) translate(100px,10px) scale(1.5,1.5);
  -moz-transform:rotate(30deg) translate(100px,10px) scale(1.5,1.5);
  -webkit-transform:rotate(30deg) translate(100px,10px) scale(1.5,1.5);
}

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

Transformaciones en CSS3

Blog, CSS | 1 Comment

1 comentario

*

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>