CSS Transform

Funções Transform

Referência Rápida

Função	Valores	Efeito
`translate(x, y)`	`50px`, `-30px`, `50%`	Mover elemento
`translateX(x)`	`50px`	Movimento horizontal
`translateY(y)`	`-30px`	Movimento vertical
`scale(n)`	`1.5`, `2`, `0.5`	Escala (1 = original)
`scaleX(n)`	`1.5`	Escala horizontal
`scaleY(n)`	`0.8`	Escala vertical
`rotate(deg)`	`45deg`, `90deg`, `-180deg`	Rotacionar (positivo = horário)
`skew(x, y)`	`10deg`, `-5deg`	Distorção de inclinação
`skewX(deg)`	`10deg`	Inclinação horizontal
`skewY(deg)`	`10deg`	Inclinação vertical
`transform-origin`	`center`, `top left`, `50% 50%`	Ponto de origem da transformação

translate (Mover)

Exemplo

HTML

<style>
.box {
  width: 100px;
  height: 100px;
  background: #3498db;
  transition: transform 0.3s;
}
.box:hover {
  transform: translate(50px, 20px);
}
</style>
<div class="box">Hover para mover</div>

▶ Experimente

scale (Redimensionar)

Exemplo

HTML

<style>
.box {
  width: 100px;
  height: 100px;
  background: #e74c3c;
  transition: transform 0.3s;
}
.box:hover {
  transform: scale(1.5);
}
</style>
<div class="box">Hover para ampliar</div>

▶ Experimente

rotate (Rotacionar)

Exemplo

HTML

<style>
.box {
  width: 100px;
  height: 100px;
  background: #2ecc71;
  transition: transform 0.3s;
}
.box:hover {
  transform: rotate(45deg);
}
</style>
<div class="box">Hover para rotacionar</div>

▶ Experimente

transform-origin

Muda o ponto de referência para rotação/escala:

Exemplo

HTML

<style>
.box {
  width: 100px;
  height: 100px;
  background: #9b59b6;
  transform-origin: top left;
  transition: transform 0.3s;
}
.box:hover {
  transform: rotate(45deg);
}
</style>
<div class="box">Rotacionar do canto superior esquerdo</div>

▶ Experimente

Combinando Transformações

Múltiplas transformações executam da direita para a esquerda (ordem inversa):

CSS

.box {
  transform: translateX(50px) rotate(45deg) scale(1.2);
  /* Primeiro escala → Depois rotaciona → Finalmente translada */
}

❓ Perguntas Frequentes

Q Qual é a diferença entre transform e mudar top/left?

R transform apenas aciona a etapa de composição — não causa reflow de layout ou pintura, melhor desempenho. Mudar top/left aciona reflow, causando travamento da página. Para animações, prefira transform.

Q O que transform: translate(-50%, -50%) com position: absolute faz?

R Solução clássica de centralização. `top: 50%; left: 50%; transform: translate(-50%, -50%);` primeiro posiciona o canto superior esquerdo do elemento no centro do pai, depois translate move de volta pela metade de suas próprias dimensões para centralização perfeita.

Q Transformações 3D precisam de configuração especial?

R Ao usar `translateZ()`, `rotateX()`, `rotateY()` etc., adicione `perspective` ao pai (como `perspective: 1000px`), caso contrário efeitos 3D podem não ser visíveis. Transformações 3D aceleram GPU, melhor desempenho que 2D.

📖 Resumo

transform é a base da animação CSS — translate, scale, rotate, skew podem combinar em incontáveis efeitos
Transformações não afetam fluxo do documento (elemento "parece" diferente mas ocupa mesmo espaço)
Transformações 3D precisam de perspective para efeitos de profundidade
Ao combinar transformações, coloque translate por último (ordem de código primeiro)

📝 Exercícios

Crie uma caixa que move 50px para direita e escala 1.5x no hover.
Crie uma imagem que rotaciona 180° no eixo Y no hover (precisa de perspective).
Crie um "card virado" — hover vira o card para mostrar conteúdo do verso (usando rotateY e backface-visibility).
Use transform-origin para mudar centro de rotação, crie um efeito de "pêndulo".