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.