Transformaciones CSS

La propiedad CSS transform permite rotar, escalar, trasladar o inclinar elementos. Así se crean efectos dinámicos y atractivos sin modificar el tamaño o posición real del elemento.

Ejemplo básico de uso de transform

En este ejemplo, un cuadro se rota 45 grados al hacer hover. Con una transición, la rotación ocurre de manera gradual.

El ejemplo muestra el uso de rotate(), que gira el elemento un ángulo específico.

Principales funciones de transform

Transform puede modificar los elementos de varias formas: rotación, escala, traslación e inclinación. Se pueden combinar para efectos más complejos.

Función	Descripción
rotate()	Rota el elemento un ángulo específico (ej. rotate(45deg)).
scale()	Escala el elemento para agrandarlo o reducirlo (ej. scale(1.5)).
translate()	Traslada el elemento en los ejes X e Y (ej. translate(50px, 20px)).
skew()	Inclina el elemento en los ejes X e Y (ej. skew(20deg, 10deg)).

Consejos para usar transform

Transform es una herramienta poderosa para manipular elementos visualmente. Aquí algunos consejos:

Combina transform con transiciones o animaciones para movimientos más fluidos.
Usa la propiedad transform-origin para definir desde dónde ocurrirá la rotación o el escalado.
Recuerda que transform no afecta el layout alrededor del elemento, solo su apariencia visual.