Transformaciones en CSS: rotar, torcer, escalar o deplazar

Las transformaciones CSS nos permiten rotar, torcer, escalar o desplazar los elementos de nuestra página web. Estas propiedades de CSS3 resultan muy interesantes porque convierten el lenguaje de hojas de estilo en un sistema capaz de generar todo tipo de efectos visuales.

Las transformaciones CSS se aplican de forma instantánea, modificando directamente la apariencia del elemento. Sin embargo, tal como vimos con las transiciones, también pueden combinarse con cambios de estado —como :hover, :focus, :active o incluso al añadir o quitar clases mediante JavaScript— para generar efectos visuales más atractivos.

1. Transformaciones en CSS: Tipos de propiedades

Las dos propiedades que nos sirven para definir las transformaciones son transform y transform-origin.

1.1. Propiedad transform-origin

Con transform-origin modificamos la posición de origen que se utilizará para la transformación. Por defecto es el centro del elemento.

Valores aceptados por transform-origin:

1. Palabras clave como:
   • top, left, right, bottom, center.Combinarlas como: top left, bottom right, etc.
   Ejemplo:

   transform-origin: top left; /* Esquina superior izquierda */
   transform-origin: bottom right; /* Esquina inferior derecha */
   transform-origin: center; /* Centro del elemento (valor por defecto) */

2. Porcentajes:
   • 0% representa el inicio.100% representa el final.Ejemplo: 50% 50% (equivalente al centro del elemento).
   Ejemplo:

   transform-origin: 25% 75%; /* 25% desde la izquierda, 75% desde arriba */

3. Coordenadas absolutas (píxeles, em, etc.):
   • Ejemplo: 20px 30px.
   Ejemplo:

   transform-origin: 20px 30px; /* 20px desde la izquierda, 30px desde arriba */

Ejemplo en CodePen

1.2. Propiedad transform

La propiedad transform se utiliza para aplicar una o más transformaciones a un elemento. Su sintaxis básica es:

transform: tipo_de_transformación(valor);

Puedes aplicar varias transformaciones a la vez separándolas por un espacio.

transform: tipo_de_transformación(valor) otro_tipo_de_transformación(valor);

2. Tipos de transformaciones para la propiedad transform

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);
 }

3. Ejemplo de transformaciones

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”.

4. Ejemplo de centrado de elemento mediante transform y el valor translate

Centra vertical y horizontalmente una imagen o un contenedor dentro de un div mediante el uso de la propiedad transform y posición absoluta en CSS.

1. div { position: relative; }: Este estilo establece la posición relativa para el div contenedor. Esto es necesario para que los elementos posicionados absolutamente dentro de él se alineen correctamente con respecto a él.
2. div img { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); }: Estos estilos se aplican a la imagen (o cualquier otro elemento dentro del div). Se establece una posición absoluta para la imagen, lo que la saca del flujo normal del documento y la coloca en relación con su primer ancestro posicionado. Luego, las propiedades left y top se establecen en 50%, lo que significa que el borde superior izquierdo de la imagen estará posicionado en el 50% del ancho y el 50% de la altura del div contenedor. Finalmente, la propiedad transform: translate(-50%, -50%) se utiliza para mover la imagen hacia arriba y hacia la izquierda en un 50% de su propio tamaño, lo que logra el centrado vertical y horizontal.

Este método es útil para centrar imágenes o contenedores dentro de un div de manera rápida y sencilla. Sin embargo, no es adecuado para centrar texto, ya que no tiene en cuenta el tamaño de la letra y puede no producir resultados precisos en ese caso.

Comprueba tu apendizaje