Tutoriales en la Web

Transformaciones en CSS3

Posteado el 25. Sep, 2012 por tuto in Desarrollo Web, HTML y CSS, HTML5

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

Code block

transform: tipo(cantidad);

rotate.

Code block

transform: rotate(25deg);

Rotate

skew.

Code block

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

skew

Scale.

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

Code block

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

Scale

translate.

Podemos desplazar el elemento tanto en X como en Y.

Code block

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

translate

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

Code block

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

Articulos relacionados:

Tags: css3, html5