Transformaciones en CSS: rotar, torcer, escalar o deplazar

Transformaciones en CSS

Las transformaciones CSS nos permiten rotar, torcer, escalar o desplazar los elementos de nuestra página web. Este tipo de propiedades de CSS3 son muy interesantes para convertir el lenguaje de hojas de estilo en un sistema capaz de realizar todo tipo de efectos visuales. Las dos propiedades que nos sirven para definir las transformaciones son transform y transform-origin.

• transform-originLa posición de origen que se utilizará para la transformación es por defecto el lado superior izquierdo del elemento.
• transformLa posición de origen para realizar la transformación es el eje central del elemento.

Tipos de transformaciones

Las transformaciones que podemos aplicar son las siguientes:

• Scale: modifica el tamaño de los elementos. La función scale () se establece con uno o dos valores, que representan la cantidad de escala que se aplica en cada dirección: scale (x) o scale(x,y). Se define mediante un valor numérico de manera que cuando un valor de coordenadas está fuera del rango [-1, 1], el elemento crece a lo largo de esa dimensión. Cuando está dentro del rango el elemento se encoge.

transform: scale(0.5); /* Escala el elemento a la mitad */

• Translate: cambia la posición del elemento hacia la izquierda, derecha, arriba o abajo. La función translate() se establece con uno o dos valores: translate(x) o translate(x,y). Los valores x e y son los vectores de translación en las coordenadas x e y. Sus valores pueden estar definidos en píxeles, porcentajes,…

transform: translate(10px); /* Traslada el elemento 10px hacia la derecha */

• Rotate: gira o rota los elementos en grados: rotate(v).

transform: rotate(45deg); /* Rota el elemento 45 grados */

• Skew: distorsiona los elementos según el ángulo en grados. La función skew() se establece con uno o dos valores: skew(x) o skew(x,y).

transform: skew(45deg); /* Distorsiona el elemento 45 grados en el eje x */

• Matrix: mueve o transforma los elementos con precisión de píxel. La función matrix() se establece con seis valores numéricos: matrix(a,b,c,d,x,y). Los dos últimos valores representan la translación y los primeros la transformación lineal.

transform: matrix(0.5, 0.1, 0.5, 1, 10, -2);

La propiedad transform se usa junto con la propiedad transition vista en la sección anterior para que la transformación pueda tener una transición espaciada en el tiempo:

.caja1{
   -webkit-transition: 1s linear;
   transition: 1s linear;
 }
 .caja1:hover{
   -webkit-transform: scale(.5);
   transform: scale(.5);
 }

Ejemplo

Crea un contenedor de 180 píxeles de ancho y de alto, incluye un texto en su interior y aplícale un color de fondo. Realiza las siguientes transformaciones cuando el usuario pase por encima del contenedor el puntero del ratón:

• Modifica la escala del contenedor.
• Modifica la rotación del contenedor.
• Modifica la posición del elemento mediante “translate”.
• Distorsiona el contenedor mediante “skew”.

0

Comprueba tu aprendizaje

Ejercicios propuestos

Actividad 8.

Utiliza algún tipo de transformación en uno de los elementos de tu proyecto web.