CSS: CSS Transform

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

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?

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.

1. Funções Transform

(1) 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

2. 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

3. 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

4. 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

5. 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

6. 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

P 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.

P 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.

P 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".

Equipe Técnica Web-Tutorial

Uma plataforma de tutoriais mantida por diversos desenvolvedores. Cada tutorial é escrito e revisado por profissionais da área correspondente. Trabalhamos para manter nosso conteúdo preciso e confiável — se encontrar algum problema, avise-nos.

Sobre Nós