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:
El valor tipo puede tomar cuatro valores, y cada uno de ellos realiza una función diferente:
transform: tipo(cantidad);
rotate.
Nos permite girar los elementos un número de grados. La sintaxis es:
transform: rotate(25deg);
skew.
Podemos inclinar un elemento tanto en coordenadas X como Y. El valor se expresa en grados y la sintaxis es la siguiente:
/*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:
/*transform: scale(escalaX,escalaY);*/
transform: scale(1.5,0.6);*/
translate.
Podemos desplazar el elemento tanto en X como en Y.
/*transform: translate(desplazamientoX, desplazamientoY);*/
transform:translate(12px, 19px);
Se pueden aplicar diferentes transformaciones a un mismo elemento simplemente escribiéndolas de manera consecutiva:
transform: scale(1.6) skew(10deg) translate(5px) rotate(12deg);
Bitacoras.com
25. Sep, 2012
Información Bitacoras.com…
Valora en Bitacoras.com: El atributo transform nos permite, como su propio nombre indica, transformar un elemento. Su sintaxis es la siguiente: El valor tipo puede tomar cuatro valores, y cada uno de ellos realiza una función diferente: rotate. No……