🌀 Transformaciones en Tailwind CSS

Para aplicar transformaciones de varios tipos debes usar la clase transform junto con las utilidades específicas.

Ejemplo:

    scale-50 (no necesita transform, solo es una)
    rotate-45 (no necesita transform, solo es una)
    transform scale-50 rotate-45 (necesita transform, son varias)

🔹 Escala (scale-*)

Clase CSS Ejemplo
scale-50 transform: scale(0.5);
50%
scale-100 transform: scale(1);
100%
scale-[1.25] transform: scale(1.25);
125%
scale-x-150 transform: scaleX(1.5);
X150%
scale-y-[0.6] transform: scaleY(0.6);
Y60%

🔹 Rotación (rotate-*)

Clase CSS Ejemplo
rotate-45 transform: rotate(45deg);
45°
-rotate-90 transform: rotate(-90deg);
-90°
rotate-[120deg] transform: rotate(120deg);
120°

🔹 Traslación (translate-*)

Clase CSS Ejemplo
translate-x-4 transform: translateX(1rem);
→ x4
-translate-y-2 transform: translateY(-0.5rem);
↑ y2
translate-x-[50px] transform: translateX(50px);
→ 50px

🔹 Sesgar (skew-*)

Clase CSS Ejemplo
skew-x-12 transform: skewX(12deg);
X
skew-y-[10deg] transform: skewY(10deg);
Y

🔹 Punto de origen (origin-*)

Afecta el punto desde donde se aplican transformaciones como scale o rotate.

Clase CSS Sin origen Con origen
origin-top-left + rotate-45 transform-origin: top left;
↻
↻
origin-bottom-right + scale-150 transform-origin: bottom right;
⤴
⤴