A propriedade transform permite mover, escalar, girar e inclinar um elemento visualmente — sem afetar o layout do documento (outros elementos não se movem). É acelerado por GPU, tornando-o ideal para animação.
{ : (, ); }
{ : (); }
{ : (); }
{ : (); }
.box {
transform: translateX(100px) rotate(45deg) scale(1.2);
/* applied right-to-left: scale, then rotate, then translate */
}
Múltiplas funções são aplicadas em sequência; mudar a ordem muda o resultado (girar depois transladar é diferente de transladar depois girar).
.icon:hover { transform: scale(1.2); } /* grows on hover but neighbors DON'T move */
Ao contrário de alterar width/margin, uma transformação afeta apenas a aparência pintada do elemento, não sua caixa no fluxo — portanto, elementos circundantes permanecem no lugar e não há refluxo. É exatamente por isso que as transformações são 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); }
O truque translate(-50%, -50%) para centralizar é onipresente — ele desloca o elemento para trás pela metade de seu próprio tamanho.
/* ✅ transform + opacity are composited on the GPU — animate these */
@keyframes slide { from { transform: translateX(-100%); } to { transform: translateX(0); } }
Porque as transformações pulam layout e pintura (apenas composição), animar delas permanece em 60fps — muito mais barato do que animar posição/tamanho.
As transformações são o motor das animações CSS e das micro-interações (hover lifts, modals, carousels, loading spinners).
Elas movem/escalam/giram sem disparar o layout, então são poderosas e eficientes — a forma recomendada de animar movimento na web.