Propiedad transform en css3

28 Abr

Muchas veces para resolver problemas relacionados con lo visual de una página web debemos usar tecnologías como Javascript, Jquery o Flash, ya que Css tiene un límite que muchas veces requiere de ayuda de otros lenguajes como los que acabo de nombrar.

Sin embargo Css3 intenta traer consigo la posibilidad de un alcance más amplio para de esa manera lograr conseguir funcionalidades visuales y no depender tanto de un lenguaje de programación de navegador.

En Css3 existe una propiedad llamada transform que nos permite alterar la forma de un elemento. Esta propiedad a su vez puede recibir varios valores, o mejor dicho funciones que definirán la transformación del elemento. Por ejemplo rotate.

Esta función recibirá un valor en grados, en deg.

Por ejemplo nosotros podríamos tener la imagen de El Principito:

<img id="principito" alt="Principito" src="http://fernando-gaitan.com.ar/wp-content/uploads/el_principito.jpeg" />

Y luego a través de la función rotate, rotar el elemento:

#principito {
   -moz-transform: rotate(90deg);
   -webkit-transform: rotate(90deg);
   -o-transform: rotate(90deg);
 }

Antes, de seguir analicemos este último código:

Para que la propiedad pueda ser usada por Firefox, debemos usar -moz-transform; para Safari y Chrome -webkit-transform y -o-transform para Opera. Creo que la versión 10 de Explorer también acepta esta nueva funcionalidad, pero nunca lo probé.

Así que con esto podríamos rotar la imagen 90 grados o de la forma que queramos:

    

 

Sin embargo, como dije, la propiedad transform puede recibir otro tipo de valores para realizar distintas transformaciones. Por ejemplo la función skew. Esta también recibe un valor en grados y le da al elemento un efecto como si lo estuviese estirando:

#principito {
    -moz-transform: skew(30deg);
    -webkit-transform: skew(30deg);
    -o-transform: skew(30deg);
}

El valor también puede ser negativo:

#principito {
    -moz-transform: skew(-30deg);
    -webkit-transform: skew(-30deg);
    -o-transform: skew(-30deg);
}

 

Si alguno quiere ver más funciones de transform, acá les dejo un enlace de la página que los explica a todos con ejemplos:

http://www.w3schools.com/cssref/css3_pr_transform.asp

Saludos!

Redes sociables

    Deja un comentario

    Tu dirección de correo electrónico no será publicada. Los campos necesarios están marcados *


    *