Carregando...

Transforms CSS

Transições definem quanto tempo dura uma mudança. Transform define para onde vão os pixels: deslocar um chip, girar um ícone de loading, ampliar um badge no hover — sem empurrar vizinhos como margin ou top.

O que transform altera

transform aplica um mapa 2D (depois 3D) à caixa pintada. O espaço no fluxo costuma ficar igual. translate() serve para micro-movimentos: hover, abrir/fechar, ajustes finos.

Uma propriedade, várias funções — sem listas com vírgula num único transform; encadeie com espaços: transform: translateX(1rem) rotate(8deg) scale(1.05);

Funções 2D principais

📊 Funções transform 2D em resumo

Função	Uso típico
`translate(x, y)` / `translateX` / `translateY`	Mover visualmente sem reflow pesado
`rotate(ângulo)`	Girar ícones e setas (`deg`, `turn`)
`scale(x, y)` / `scale(n)`	Destaque no hover — valores modestos
`skew(x, y)`	Inclinação rara — ângulos pequenos

Ângulos em deg ou turn. Percentagens em translate() são relativas ao tamanho do próprio elemento.

translate primeiro

Para um empurrão visual, use translate antes de top/margin. Com transition da lição anterior, o movimento fica mais suave.

Chip nudge on hover

css

.chip {
display: inline-block;
padding: 0.35rem 0.75rem;
border-radius: 999px;
background: #e0e7ff;
color: #1e3a8a;
transition: transform 0.2s ease, background-color 0.2s ease;
}

.chip:hover,
.chip:focus-visible {
transform: translateY(-0.15rem);
background: #c7d2fe;
}

O chip sobe visualmente; a caixa de linha permanece. Com margin-top negativo, os vizinhos saltam.

rotate e scale juntos

Badges e ícones costumam combinar scale pequeno com rotate. Ângulos contidos mantêm o UI profissional.

Badge pop and chevron spin

css

.badge {
display: inline-flex;
align-items: center;
gap: 0.35rem;
font-size: 0.875rem;
transition: transform 0.25s ease;
}

.badge:hover {
transform: scale(1.06);
}

.chevron {
display: inline-block;
transition: transform 0.2s ease;
}

.menu-open .chevron {
transform: rotate(180deg);
}

scale(1.06) é ênfase; scale(2) é erro comum. rotate(180deg) indica «aberto» — via classe.

transform-origin — pivô

Por padrão o pivô é o centro. transform-origin move-o — canto inferior esquerdo como porta, 50% 100% para abas.

Hinge from bottom edge with transition

css

.panel-tilt {
transform-origin: 50% 100%;
transition: transform 0.35s ease;
}

.panel-tilt.is-open {
transform: rotateX(12deg);
}

rotateX leve para vocabulário. 3D completo na sessão opcional 3D Transforms — aqui o foco é origin.

Com transition; evite layout

Coloque transition na regra base e anime transform (e opacity). Respeite prefers-reduced-motion: reduce.

Experimente

Eleve um botão com translateY(-0.2rem) — compare com margin-top.
Gire chevron 180deg com .is-open.
transform-origin: left center e rotate pequeno.
Encadeie translateX(0.5rem) scale(1.04) num só transform.
Emule reduced motion.

Erros comuns

top/margin em vez de translate para lift
rotate(45deg) em wrappers grandes
Esquecer transform-origin
scale(0) sem plano de acessibilidade
3D pesado quando 2D basta

Resumo

transform move a caixa pintada; o fluxo costuma ficar
Encadeie funções num transform
transform-origin = pivô
Combine com transition
Próximo: Animações CSS (@keyframes)

🧠 Teste Seu Conhecimento

Pronto para Começar

Teste Seu Conhecimento

Desafie-se com este questionário interativo e veja o quão bem você entende o tópico

❓

Perguntas

🎯

70%

Para Passar

♾️

∞

Tempo

🔄

∞

Tentativas

📝 Instruções

Leia cada pergunta cuidadosamente
Selecione a melhor resposta para cada pergunta
Você pode refazer o quiz quantas vezes quiser
Seu progresso será mostrado no topo

Idioma