Mover, rotar y escalar

La propiedad transform recibe una o más funciones. Las tres de base son:

1. MovertranslatetranslateX(24px) corre la caja 24px a la derecha; translate(24px, 8px) la mueve en los dos ejes.
2. Rotarrotaterotate(45deg) la gira 45 grados en sentido horario. Un ángulo negativo gira al revés.
3. Escalarscalescale(1.2) la hace un 20% más ancha y más alta, y scale(0.5) la deja a la mitad de cada lado.

Lo importante: la transformación no toca el layout. La caja sigue ocupando su lugar y las vecinas no se corren. En la demo, la ficha del medio se levanta del atril: su hueco punteado y las fichas vecinas se quedan quietos. La línea naranja mide cuánto la corre translateX.

.ficha {
  transform: translateX(24px) rotate(30deg) scale(1.2);
  transform-origin: center;
  transition: transform 300ms cubic-bezier(0.22, 1, 0.36, 1);
}

<div
  class="translate-x-6 rotate-30 scale-120 origin-center
         transition-transform duration-300 ease-[cubic-bezier(0.22,1,0.36,1)]
         motion-reduce:transition-none"
>
  A
</div>

En la versión corta el orden importa. Cada función trabaja sobre los ejes que deja la anterior: con rotate(45deg) translateX(24px) la caja avanza en diagonal, no en horizontal. Por eso conviene escribirlas siempre en el mismo orden: mover, rotar, escalar.

Ángulos y punto de origen

Los ángulos aceptan cuatro unidades. Una vuelta completa vale lo mismo en todas:

11turn = 360deg = 2π rad ≈ 6.2832rad = 400grad

En la práctica alcanza con deg y turn: un cuarto de vuelta es 90deg o 0.25turn. La rotación y la escala se hacen alrededor del punto de origen (transform-origin), que por defecto es el centro de la caja. Con top left la caja gira desde su esquina superior izquierda: el punto naranja lo marca.

CSS también tiene translate, rotate y scale como propiedades sueltas. Se pueden cambiar de a una sin repetir las otras, y el navegador las aplica siempre en ese orden: mover, rotar, escalar.

1.ficha {
2  translate: 24px 0;
3  rotate: 30deg;
4  scale: 1.2;
5}

Transiciones

Una transición (transition) anima el cambio de una propiedad entre su valor viejo y el nuevo. Tiene cuatro partes:

1. Propiedadtransition-propertyQué se anima, por ejemplo transform.
2. Duracióntransition-durationEn s o ms. 1s es igual a 1000ms.
3. Curvatransition-timing-functionCómo se reparte la velocidad. linear va parejo; ease, el valor por defecto, arranca suave, acelera y frena despacio. cubic-bezier(0.22, 1, 0.36, 1) sale rápido y se asienta despacio: va bien para algo que se mueve.
4. Retardotransition-delayCuánto espera antes de arrancar.

Animá transform y opacity: el navegador las cambia sin recalcular el layout. La ficha se pinta en una capa propia, encima de la página, y se mueve sola; animar width o top obliga a recalcular el layout en cada cuadro, y se nota.

Y respetá a quien pide menos movimiento desde su sistema:

1.ficha {
2  transition: transform 300ms ease-out;
3}
4
5@media (prefers-reduced-motion: reduce) {
6  .ficha {
7    transition: none;
8  }
9}

En Tailwind

En Tailwind v4, translate-x-*, rotate-* y scale-* no escriben transform: usan las propiedades sueltas translate, rotate y scale. Como el navegador las aplica en ese orden, el resultado es el mismo que mover, rotar y escalar en el atajo.

1<button
2  class="transition-transform duration-300 ease-out
3         hover:-translate-y-1 hover:scale-105
4         motion-reduce:transition-none"
5>
6  Guardar
7</button>