La propiedad transform te permite mover, escalar, girar e inclinar un elemento visualmente — sin afectar el diseño del documento (otros elementos no se desplazan). Es acelerado por GPU, lo que lo hace ideal para animaciones.
{ : (, ); }
{ : (); }
{ : (); }
{ : (); }
.box {
transform: translateX(100px) rotate(45deg) scale(1.2);
/* applied right-to-left: scale, then rotate, then translate */
}
Varias funciones se aplican en secuencia; cambiar el orden cambia el resultado (girar y luego trasladar es diferente a trasladar y luego girar).
.icon:hover { transform: scale(1.2); } /* grows on hover but neighbors DON'T move */
A diferencia de cambiar width/margin, una transformación solo afecta la apariencia pintada del elemento, no su caja en el flujo — así que los elementos circundantes permanecen en su lugar y no hay reflujo. Exactamente por eso las transformaciones son suaves.
/* center an absolutely-positioned element */
.modal { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }
/* hover lift */
.card:hover { transform: translateY(-4px); }
/* 3D and perspective */
.card { transform: perspective(500px) rotateY(15deg); }
El truco de centrado translate(-50%, -50%) es ubicuo — desplaza el elemento hacia atrás por la mitad de su propio tamaño.
/* ✅ transform + opacity are composited on the GPU — animate these */
@keyframes slide { from { transform: translateX(-100%); } to { transform: translateX(0); } }
Como las transformaciones omiten el diseño y la pintura (solo composición), su animación se mantiene a 60fps — mucho más barato que animar posición/tamaño.
Las transformaciones son el caballo de batalla de las animaciones CSS e interacciones micro (efectos hover, modales, carruseles, spinners de carga).
Mueven/escalan/giran sin desencadenar diseño, así que son poderosas y eficientes — la forma recomendada de animar movimiento en la web.