Curso de CSS
Dale estilo y vida a la web.
Aprende CSS con ejemplos interactivos y crea proyectos reales.
transform mueve, rota, escala o inclina un elemento sin afectar el flujo del resto de la página — la base de casi cualquier efecto visual moderno.
Explicación
Estas son las funciones más comunes de transform:
translate(x, y)Mueve el elemento desde su posición original, sin afectar a los elementos vecinos.
scale(n)Agranda o achica el elemento; 1 es tamaño normal, 1.1 es 10% más grande.
rotate(deg)Rota el elemento un número de grados sobre su centro.
transform: a b;Se pueden combinar varias transformaciones en la misma propiedad, separadas por espacios.
Reto rápido
Agrega translate(0, -4px) a la transformación del hover, combinado con scale y rotate.
En esta lección
- Ejemplo interactivo
- Explicación de cada etiqueta
- Cuándo usarlo
- Errores comunes
Consejo
transform es una de las propiedades más eficientes para animar en el navegador (junto con opacity), porque no obliga a recalcular el layout de toda la página.
Dato extra
Puedes cambiar el punto desde el que se aplica una transformación (por defecto el centro) con la propiedad transform-origin.
Error común
Esperar que transform: translate() cambie la posición de los elementos vecinos: transform es puramente visual y no afecta el flujo normal del documento.
Siguiente paso
Ya mueves y transformas elementos en un solo paso. Para secuencias de varios pasos, usarás @keyframes.
Ir a la siguiente lección