Generador de transform CSS

El orden de las funciones no es decorativo

El navegador lee la lista de transform de izquierda a derecha, y cada función deja transformado el sistema de coordenadas que usará la siguiente. Por eso translateX(100px) rotate(45deg) mueve el elemento 100 píxeles a la derecha y luego lo gira sobre sí mismo, mientras que rotate(45deg) translateX(100px) inclina primero los ejes y hace que esos 100 píxeles se recorran en diagonal. Mismas dos funciones, dos posiciones finales completamente distintas.

Este generador siempre escribe en un orden fijo: desplazamiento, giro, inclinación y escala. No es capricho. Al poner el desplazamiento primero, el elemento se mueve por los ejes de la pantalla, que es lo que casi siempre esperas; si lo dejaras para el final, cada giro previo cambiaría la dirección del movimiento y tendrías que calcular de cabeza hacia dónde acaba yendo. Si necesitas el efecto órbita —girar alrededor de un punto lejano— es justo al revés: pon primero el giro y después el desplazamiento.

transform-origin: el alfiler sobre el que pivota todo

Todas las funciones de transform, menos las de desplazamiento, necesitan un punto fijo de referencia. Ese punto es transform-origin y por defecto vale 50% 50%: el centro exacto del elemento. Cámbialo y cambia el gesto entero sin tocar ni un grado.

Un rotate(15deg) con origen 50% 50% es una tarjeta ligeramente torcida. El mismo giro con origen 0% 100% es una puerta con bisagra en la esquina inferior izquierda. Un scaleX(1.4) con origen al centro crece hacia los dos lados; con origen 0% 50% crece solo hacia la derecha, que es el truco detrás de las barras de progreso y los subrayados que se despliegan al pasar el ratón. Los porcentajes se miden sobre el tamaño del propio elemento, así que también admite palabras clave (top left equivale a 0% 0%) y medidas absolutas en píxeles. En 3D acepta un tercer valor, la profundidad, que siempre va en píxeles.

Enciende «mostrar guías» en el panel de la derecha: el punto ámbar marca dónde está clavado el alfiler y la silueta discontinua es la posición original del elemento. Mover el origen y ver cómo cambia el mismo giro es la forma rápida de entenderlo.

Qué hace perspective y dónde se declara

perspective es la distancia entre el ojo del espectador y el plano de la pantalla. Sin ella, un rotateY(45deg) se ve como un simple aplastamiento horizontal, porque el navegador dibuja la escena en proyección plana. Con ella, el lado que se aleja se hace más pequeño y aparece la sensación de profundidad. Valores bajos (200–400 px) ponen el ojo muy cerca y exageran el efecto; valores altos (1200 px o más) lo dejan sutil y elegante. Para interfaces, entre 600 y 1000 px suele funcionar.

La trampa: la propiedad se declara en el contenedor padre, no en el elemento que gira. Si la escribes junto al transform, no pasa absolutamente nada, y ese es el motivo número uno de «no me funciona la perspectiva». Existe también la función perspective(), que sí va dentro del propio transform y debe ser el primer valor de la lista; la diferencia es que entonces cada elemento tiene su propio punto de fuga, en vez de compartir una escena común. Si vas a animar varias tarjetas como si estuvieran en la misma habitación, usa la propiedad en el padre. Y si quieres mover el punto de fuga fuera del centro, ahí está perspective-origin.

Por qué transform y opacity son las dos propiedades baratas de animar

Para pintar un fotograma, el navegador recorre cuatro fases: calcula estilos, calcula la disposición (layout), pinta los píxeles y compone las capas. Cuando animas width, top, left o margin, obligas a rehacer la disposición completa: mover una caja puede desplazar a todas sus vecinas, así que el navegador vuelve a medir y a repintar en cada fotograma. A 60 fotogramas por segundo tienes 16 milisegundos para todo, y ahí es donde aparece el tirón.

transform y opacity se saltan las fases caras: el elemento ya está pintado en su capa y la tarjeta gráfica se limita a colocarlo movido, girado o más transparente. Por eso la regla práctica es traducir el efecto a estas dos propiedades siempre que puedas: en vez de animar left, anima translateX; en vez de width, un scaleX con el origen bien puesto; en vez de height: 0, un scaleY desde el borde superior. Si necesitas avisar al navegador de que algo va a moverse, will-change: transform ayuda, pero úsalo con cuentagotas: cada capa extra consume memoria de vídeo.

Cuando toque decidir el color y el ritmo del movimiento, el generador de degradados te da el fondo, en colores en vivo compruebas que el contraste aguanta, y la guía de teoría del color explica por qué unas combinaciones se sienten estables y otras no.

Preguntas frecuentes

¿Por qué cambia el resultado si cambio el orden de las funciones en transform?

Porque cada función transforma el sistema de coordenadas que usará la siguiente. El navegador las aplica de izquierda a derecha: en translateX(100px) rotate(45deg) el elemento se mueve 100 píxeles a la derecha y luego gira sobre sí mismo, mientras que en rotate(45deg) translateX(100px) primero se inclinan los ejes y esos 100 píxeles se recorren en diagonal. Mismo par de funciones, dos posiciones finales distintas.

¿Qué hace exactamente transform-origin?

Define el punto fijo alrededor del cual gira, escala o se inclina el elemento. Su valor por defecto es 50% 50%, el centro de la caja. Si lo cambias a 0% 100% el elemento pivota sobre su esquina inferior izquierda, como una puerta con bisagra. Los porcentajes se miden sobre el tamaño del propio elemento, y también admite palabras clave como top left o medidas absolutas en píxeles.

¿Dónde se declara perspective y por qué parece que no funciona?

La propiedad perspective se declara en el contenedor padre, no en el elemento que gira. Si la pones en el mismo elemento que lleva el transform no pasa nada, y por eso parece que no funciona. La alternativa es usarla como función dentro del propio transform, escribiendo perspective(800px) como primer valor de la lista, aunque en ese caso cada elemento tiene su propio punto de fuga en lugar de compartir una escena común.

¿Por qué conviene animar transform y opacity en vez de top, left o width?

Porque transform y opacity se resuelven en la fase de composición, que se ejecuta en la tarjeta gráfica y no obliga al navegador a recalcular la posición del resto de la página. Cambiar top, left, width o margin dispara un reflow: el navegador vuelve a medir la disposición completa y a repintar en cada fotograma, y ahí es donde se pierden los 60 fotogramas por segundo.