Gracias transformaciones CSS podemos conseguir efectos impactantes que combinados con las animaciones y transiciones CSS nos permitirán darle a nuestra web movimiento y dinamismo.

Existen dos tipos de transformaciones CSS; en 2D y en 3D. Es este tutorial voy a centrarme en las animaciones 2D y todos los parámetros de la propiedad transformation que trabajan en 2D. Personalmente creo que las animaciones en 3D no son demasiado elegantes y sólo deben usarse para efectos muy concretos.

Transformaciones CSS en 2D

Tenemos cuatro funcionalidades con las que trabajar en dos dimensiones :

[ Imagen de las transformaciones ]

• translate( x, y ): Desplazamos un objeto en horizontal ( parametro x) y en vertical ( parametro y).
• scale( ):  Escalamos un objeto. El valor 1. Corresponde al 100%. Un valor de 0.8 correspondería al 80%.
• rotate( ): Giramos un objeto. El valor se expresa en grados. Por ejemplo, para girar un objeto 45 grados utilizaremos: rotate(45deg).
• skew( x, y ): Distorsionamos cualquier elemento de nuestra web. El primer valor corresponde a la distorión horizontal y el segundo a la vertical, estos valores deben ser grados. Por ejemplo: skew(45deg,75deg).

Ejemplos básicos de transformaciones css

Para los siguientes ejemplos vamos a utilizar la propiedad transformation combianda con transition. La propiedad transition nos permite que los cambios en cualquier elemento sean graduales.

Así podremos observar como modificamos nuestros objetos. Si quieres conocer mejor como funciona transition te recomiendo este otro post de mi blog Transiciones con CSS

Translate

Trasladar un objeto 100px en horizontal.

Trasladar un objeto -25px en vertical.

Trasladar un objeto 150px horizontalmente 25px verticalmente.

Trasladar un objeto tomando de referencia la anchura de nuestro objeto. Si en lugar de escribir el valor en px lo hacemos en porcentajes tomaremos de refencia las medidas del objeto a animar. Es decir, este círculo mide 90px, si escribimos transform:translateX(200%) deplazaremos nuestro objeto 180px. 100% correspondería a 90px.

Rotate

Girar 135 grados un elemento

Cambiar el punto de origen de la transformación

En el ejemplo anterior hemos visto que el cuadrado gira desde su centro. Pero podemos cambiar el punto desde donde gira cualquier objeto con la propiedad transform-origin.

• transform-origin: Admite tres parámetros: transform-origin( x-axis y-axis z-axis ). El primer valor indica el punto horizontal desde donde gira el objeto, el segundo el vertical y el tercero corresponde con la profundidad. El tercer valor sólo se utilizar para las transformaciones en 3D. Por lo que tanto no lo utilizaremos. Su valor por defecto es de 50% 50%. Esto equivale al centro del objeto.

Girando desde el vértice superior derecho.

Es este caso vamos a girar el objeto 360 grados. Y vamos a definir el punto de origen de la transformación en un 300% y 50% para el vertical. Con estos parámetros el recorrido será el de una circunferencia.

Scale

En este ejemplo aumentamos la escala de nuestro objeto un 125%. Recuerda que los valores para scale son número decimales. Siendo 1 igual al tamaño original.

Modificando sólo la escala horizontal, además el origen de la transformación será en el vértice superior izquierdo.

Skew

Distorsionando un objeto.

Espero que este tutorial te haya resultado útil y te animes a crear tus propias transformaciones en CSS. Si tienes cualquier duda o sugerencia no dudes en dejarme un comentario.