Sintaxis de Transform

Escribiendo las reglas del movimiento

Si CSS fuera una receta de cocina, la propiedad transform sería el ingrediente secreto que cambia por completo la presentación de tu platillo. Sin embargo, al igual que en la repostería, las medidas y la forma de escribirlas importan muchísimo. Un error de sintaxis no romperá tu página, pero hará que tu elemento simplemente no se mueva.

Estructura básica: Propiedad y Función

A diferencia de propiedades como color o margin que toman valores simples como red o 20px, transform requiere que le pases funciones matemáticas.

La estructura siempre es la misma: la palabra transform, seguida de dos puntos, el nombre de la función (como translate, scale o rotate), y paréntesis que encierran los valores que esa función necesita.

Múltiples transformaciones: El arte del espacio

Aquí es donde muchos desarrolladores junior tropiezan. Si quieres que un elemento se mueva hacia arriba Y además crezca de tamaño, podrías pensar instintivamente en escribir dos propiedades transform separadas, o tal vez separarlas por comas.

La sintaxis correcta requiere que pongas todas las funciones en una sola línea, separadas únicamente por espacios.

/* INCORRECTO: Sobreescribe la anterior */
transform: translateY(-20px);
transform: scale(1.2);

/* INCORRECTO: Las comas rompen el código */
transform: translateY(-20px), scale(1.2);

/* CORRECTO: Separado por espacios */
transform: translateY(-20px) scale(1.2);

El orden es fundamental

Imagina que le dices a alguien: "Camina 5 pasos hacia adelante y luego gira a la derecha". Eso lo llevará a un destino. Pero si le dices: "Gira a la derecha y luego camina 5 pasos hacia adelante", ¡terminará en un lugar completamente diferente!

CSS lee las funciones de transform de izquierda a derecha (aunque internamente se apliquen multiplicando matrices de derecha a izquierda). Lo vital es entender que si primero rotas un elemento, sus ejes "Arriba" y "Abajo" también rotan. Si luego le aplicas un translateY, no se moverá hacia el norte de tu pantalla, sino hacia donde apunte la nueva parte superior del elemento rotado.