Hablemos de la propiedad transforms y sus funciones en CSS3

Hablar de las transformaciones en CSS3 es hablar de novedad, la propiedad Transform en CSS3 nos va a permitir hacer cambios a los objetos del documento al que le apliquemos este estilo, esta propiedad nos va permitir hacer las siguientes transformaciones a los elementos: translate (traducir), rotate (rotar), scale (escalar) o skew (sesgar), efectos que antes era imposible hacer con css y para usarlos en la web teníamos que utilizar flash o javascript. Bueno damos gracias que ya CSS3 podemos hacer estas funciones. Bueno antes de comenzar miremos el soporte de cada navegador sobre esta propiedad.

 
transforms-navegadores

Ahora si, vamos a ver cada una de las funciones de la propiedad Transforms

transformaciones-con-css3

—————————————————————————————————–

1 – Translate:

o Transformación de Posición:

Esta propiedad de CSS3 nos permite mover elementos a la izquierda, derecha, arriba o abajo mediante la funcion translation, esta función es similar al comportamiento de position que trabajábamos en css2: position: relative; donde se declaraba su posición en superior e izquierdo por ejemplo. Cuando se emplea una función de Translation a un objeto lo podemos mover sin afectar el flujo de trabajo del documento.

Un elemento con la transformación translation puede moverse con relación a su posición actual.

Esta transformación se mueve en función (x,y) es decir x de la izquierda a derecha – y de la parte superior a inferior

Un ejemplo seria el siguiente Codigo de css:

Aplicado al siguiente codigo HTML.

Que lo que hacemos es mover el h1 45px desde la izquierda y 45px desde la parte superior del div.

traslate-css3

Esta función de la propiedad transform Tenemos que aplicarle a transform: translate(x,y); los prefijos de los diferentes navegadores, es decir –mz-, -webkit-, -o- y -ms- para visualizarlo correctamente en los principales navegadores.(Ver nota acerca los prefijos de loa navegadores).

Esta función también la podemos usar con valores negativos, es decir (x,y) = (-30px , -10px), y así podemos darle la ubicación deseada.

———————————————————————————————-

2 – scale:

o Transformación de Escala:

Otra función de la propiedad transform es scale, esta función nos va a permitir escalar un elemento tanto horinzontal como verticalmente entorno a su origen y lo hacemos por medio de su (x,y ), lo mismo que hacemos en photoshop cuando presionamos ctrl + t y nos da la opción de escalar el objeto ya sea guardando proporciones o no. Esto ya lo podemos hacer con CSS3, solamente le tenemos que pasar los valores requeridos y listo.

scale-transform

Veamos como afecta el siguiente codigo CSS al h1:

Vamos a mirar el h1 en su estado narmal y el h1 con la transformacion de escala:

scale-transform

————————————————————————————-

3 – Rotate

o Transformación de Rotacion:

Otra gran novedad de CSS3, esta función nos va a permitir rotar ya sea un texto, un div u otro elemento del documento HTML, solamente tenemos que indicar los grados que debe girar el elemento ya sea un valor negativo o positivo guiándonos, positivo se moverá como se mueven las manecillas del reloj.

rotate-CSS3

Para el siguiente codigo CSS:

y este codigo HTML:

Obtenemos el siguiente resultado con su explicación.

rotacion css3

——————————————————————————————-

Skew

o Transformación de Inclinacion:

Esta función nos va a permitir inclinar o aplicar un tipo de perspectiva a un elemento en el documento HTML, como los demás tenemos que especificar las coordenadas de sus angulos para su inclinación, (X, Y) el primero X que se aplica Horizontalmente y Y que se aplica verticalmente.

skew-css3

Para el siguiente codigo CSS:

Y el siguiente codigo HTML.

Vamos a tener el siguiente resultado:

transform skew

Con estas transformaciones vamos a hacer cosas realmente sorprendentes para poder aplicarlo a nuestros proyectos, si los combinamos y ajustamos los valores vamos a conseguir formas que antes eran imposibles hacerlos.

Para una mayor información ve a esta página: http://www.w3schools.com/cssref/css3_pr_transform.asp

About the author

Johan Ricardo Niebles. Administrador y creador de este blog, Front-end (HTML + CSS + JS).con mas de 4 años de experiencia en el magico mundo web. Johan Ricardo