transform: mover, escalar e rotacionar

A propriedade transform

Hora de dar vida às suas interfaces. transform permite deformar visualmente um elemento —movê-lo, escalá-lo, rotacioná-lo ou incliná-lo— sem mexer na sua posição real no documento. E é rápida: o navegador a resolve na GPU, então o movimento sai liso como seda.

.caixa {
  transform: translate(20px, 10px);  /* mover em X e Y */
}
.icone {
  transform: scale(1.5);             /* aumentar para 150% */
}
.seta {
  transform: rotate(45deg);          /* girar 45 graus */
}

As funções mais usadas

• translate(x, y): desloca o elemento. Também translateX() e translateY().
• scale(n): muda o tamanho (1 = original, 2 = o dobro, 0.5 = a metade).
• rotate(ângulo): gira em graus (deg), por exemplo rotate(90deg).

Você pode combinar várias funções separando-as por espaços:

.combo {
  transform: translateX(10px) rotate(15deg) scale(1.2);
}

Não afeta o fluxo do documento

Isto é fundamental: um transform é puramente visual. O elemento ocupa o mesmo espaço que antes; os demais elementos não são reposicionados mesmo que você o mova ou o aumente. Por isso é perfeito para efeitos sem "saltos": o vizinho do lado nem percebe que o seu botão acabou de crescer.

O ponto de referência (origem) da transformação é controlado com transform-origin (por padrão, o centro do elemento).

Exemplos

Combinar transformações

const t = "translateX(10px) rotate(15deg) scale(1.2)";
console.log(t);