Comunidad de diseño web y desarrollo en internet online

Transformaciones en CSS3

Una de las aportaciones de CSS3 que en mi opinión añaden más dinamismo al diseño son las transformaciones. A partir de ahora podremos modificar la rotación, inclinación o escala de nuestros elementos.

transform en CSS3

El atributo transform nos permite, como su propio nombre indica, transformar un elemento. Su sintaxis es la siguiente:

Código :

transform: tipo(cantidad);

El valor tipo puede tomar cuatro valores, y cada uno de ellos realiza una función diferente:

  • rotate. Nos permite girar los elementos un número de grados. La sintaxis es:

    Código :

    transform: rotate(25deg);
    Importante: He notado que las transformaciones aplicadas a textos no funcionan bien con -webkit-. Como solución podemos aplicarlas a las capas contenedoras. En -moz- sí se puede aplicar directamente sobre el texto sin problemas.


    El valor que demos al giro se aplicará en sentido horario

  • skew. Podemos inclinar un elemento tanto en coordenadas X como Y. El valor se expresa en grados y la sintaxis es la siguiente:

    Código :

    /*transform: skew(gradosX, gradosY);*/ 
    transform: skew(15deg, 3deg);

  • scale. Con este tipo podremos escalar nuestro elemento tanto en X como en Y en una cantidad expresada en tantos por uno:

    Código :

    /*transform: scale(escalaX,escalaY);*/ 
    transform: scale(1.5,0.6);*/


  • translate. Podemos desplazar el elemento tanto en X como en Y.

    Código :

    /*transform: translate(desplazamientoX, desplazamientoY);*/ 
    transform:translate(12px, 19px);

Se pueden aplicar diferentes transformaciones a un mismo elemento simplemente escribiéndolas de manera consecutiva:

Código :

transform: scale(1.6) skew(10deg) translate(5px) rotate(12deg);

Os dejo un ejemplo sencillo de transformaciones en este link.

En el siguiente tema veremos como crear animaciones sólo con CSS3.

 

Información adicional

® Cristalab 2011

Si tienes alguna pregunta de este ejemplo; puedes hacerla aqui en los foros.