CSS transform: rotate, scale, translate, skew e flip 3D | We.Inc
Arraste os controles de rotate, scale, translate e skew e copie o CSS e as classes Tailwind. Explica a ordem das transformações, transform-origin, flip de card em 3D e animação suave.
Mova, gire, redimensione ou incline um elemento com a propriedade transform: transform: translate(20px, 0) rotate(15deg) scale(1.1) skewX(5deg). As funções são aplicadas da direita para a esquerda, então a ordem muda o resultado. As transformações nunca deslocam o layout ao redor, e animá-las é barato porque o navegador pode passar o trabalho para o compositor.
As quatro funções de transformação 2D
Função
Exemplo
Tailwind
translate()
translate(1rem, -50%)
translate-x-4 -translate-y-1/2
rotate()
rotate(45deg)
scale()
scale(1.1)
skew()
skewX(6deg)
Use os controles deslizantes para montar uma transformação e veja um card reagir, depois alterne entre a propriedade transform única e as propriedades separadas translate, rotate e scale. Mais abaixo estão a demonstração de origem, um flip 3D que reage ao hover, receitas de transição e uma explicação de por que as transformações continuam suaves enquanto top e left travam.
Arraste os controles de translate, rotate, scale e skew. O card se move e o CSS se reescreve sozinho.
Escolha um transform-origin para ver qual ponto fica fixo enquanto o card gira ou cresce.
Alterne entre o atalho transform combinado e as propriedades individuais.
Copie o CSS ou as classes Tailwind e cole na sua folha de estilos ou no seu HTML.
Centralize uma caixa com posicionamento absoluto usando top: 50%; left: 50%; translate: -50% -50%. Porcentagens em translate se referem ao próprio elemento, não ao pai.
Anime transform e opacity em vez de width, height, top ou left. Essas outras propriedades forçam trabalho de layout a cada quadro.
Rotações acima de 360deg são permitidas e fazem diferença na animação: rotate(720deg) dá duas voltas quando a transição parte de 0.
Adicione will-change: transform só nos elementos que estão prestes a animar e depois remova. Deixá-lo em todo lugar consome memória.
Perguntas frequentes
Por que a ordem das funções de transformação importa?
Cada função muda o sistema de coordenadas das que foram escritas antes dela, então na prática a lista é aplicada da direita para a esquerda. translate(100px) rotate(45deg) gira a caixa e depois a desliza em linha reta para a direita, enquanto rotate(45deg) translate(100px) a desliza ao longo do eixo diagonal, já girado.
Qual é a diferença entre transform: rotate() e a propriedade rotate?
As propriedades rotate, scale e translate são versões independentes das mesmas funções. Elas podem ser definidas e animadas separadamente, então um scale no hover não apaga uma rotação definida em outro lugar. O navegador aplica primeiro translate, depois rotate, depois scale e, por fim, o que estiver em transform.
O transform afeta o layout ou outros elementos?
Não. O elemento mantém a sua caixa original no layout e os vizinhos não se movem. Só a imagem pintada muda. Um elemento transformado cria um novo contexto de empilhamento e passa a ser o bloco de contenção dos descendentes com posição fixa, o que pode surpreender você em modais.
Como espelho um elemento na horizontal?
Use transform: scaleX(-1) ou a propriedade scale com scale: -1 1. Isso espelha o elemento em torno da sua origem, que por padrão é o centro. Para um flip 3D que mostre o verso, gire em torno do eixo Y dentro de um pai com perspective.
Por que o meu texto transformado fica borrado?
Deslocamentos fracionários e alguns valores de scale colocam os glifos entre pixels, o que os suaviza, principalmente durante uma animação. Arredondar os valores de translate para pixels inteiros e escalar até o tamanho final, em vez de aumentar a partir de um tamanho menor, geralmente deixa o resultado mais nítido.
Lendo uma lista de transformações
Um modelo mental útil: comece pela última função e volte até a primeira, a cada vez movendo, girando ou esticando o elemento no seu referencial atual, já alterado. Se um resultado parecer errado, inverter a lista muitas vezes resolve.
Porcentagens dentro de translate() medem a própria border box do elemento. É por isso que translate(-50%, -50%) centraliza uma caixa cujo tamanho você não sabe de antemão.
Por que as transformações animam com suavidade
Os navegadores renderizam uma página em etapas: estilo, layout, pintura e composição. Mudar top ou width refaz o layout do elemento e muitas vezes o dos vizinhos. Mudar transform ou opacity geralmente pula direto para a composição, em que uma camada já pintada é movida pelo processador gráfico.
Por isso as diretrizes de movimento sempre apontam para essas duas propriedades. Se uma animação perder quadros, abra o painel de desempenho do navegador e procure trabalho de layout e pintura dentro de cada quadro.
3D em um parágrafo
Dê perspective ao pai, por exemplo 800px, para que os filhos girados em X ou Y pareçam se afastar. Números menores exageram a profundidade. transform-style: preserve-3d permite que filhos aninhados compartilhem esse espaço 3D, e backface-visibility: hidden esconde uma face quando ela se vira, que é a base de todo flip de card.
Todas as funções de transformação
Funções de transformação 2D e 3D com os utilitários Tailwind
Função
O que faz
Tailwind (v3 e v4, salvo indicação)
translate(x, y)
Move nos eixos X e Y
translate-x-4, -translate-y-2, translate-x-[13px]
translateX() / translateY()
Move em um eixo
translate-x-1/2, translate-y-full
translateZ(z)
Aproxima ou afasta do observador (precisa de perspective)
translate-z-4 (v4)
rotate(a)
Gira no sentido horário por um ângulo (deg, turn, rad)
rotate-45, -rotate-12, rotate-[17deg]
rotateX(a) / rotateY(a)
Inclina em torno do eixo horizontal ou vertical em 3D
rotate-x-45, rotate-y-180 (v4)
scale(s) / scale(x, y)
Aumenta ou diminui; valores negativos espelham
scale-110, scale-x-75, -scale-x-100
skew(x, y) / skewX() / skewY()
Inclina o elemento
skew-x-6, -skew-y-3
matrix(a, b, c, d, e, f)
Todas as transformações 2D em uma só matriz
arbitrário: [transform:matrix(...)]
perspective(d)
Profundidade só para este elemento
perspective-[800px] no pai (v4)
Ordem das operações
As mesmas duas funções em outra ordem colocam a caixa em outro lugar. As duas caixas azuis começam no mesmo ponto.
translate e depois rotate, versus rotate e depois translate
Na primeira caixa o deslocamento acontece ao longo do eixo X da tela. Na segunda, o deslocamento segue o eixo girado, então a caixa termina mais abaixo.
As propriedades individuais não se sobrescrevem
A regra de hover só mexe em scale, então o rotate definido na regra base continua valendo. Com o atalho transform, você teria que repetir rotate(-3deg) dentro de :hover.
A mesma rotação, três origens
A origem é o ponto que fica fixo. center é o padrão; top left faz a caixa girar como uma porta presa por uma dobradiça no canto.
Flip de card em 3D
Passe o mouse ou dê foco para virar (só CSS)
perspective no wrapper dá profundidade, preserve-3d mantém as duas faces no mesmo espaço 3D e backface-visibility esconde a face que estiver virada para trás. Quem prefere movimento reduzido vê uma troca instantânea.
Combinando transformações com transições
Efeito de elevação no hover para cards e botões
Só transform e box-shadow mudam, e o movimento é desligado para quem pede menos movimento.
A mesma ideia em Tailwind
motion-safe: aplica o movimento de hover só quando o leitor não pediu movimento reduzido.
O que é barato de animar
Trabalho de renderização disparado quando uma propriedade muda (comportamento típico dos navegadores)
Propriedade
Layout
Pintura
Só composição
transform, translate, rotate, scale
Não
Não (geralmente)
Sim
Não
Não (geralmente)
Sim
background-color, color, box-shadow
Não
Sim
Não
width, height, top, left, margin
Sim
Sim
Não
(sem transformação)
Playground de transformações
Estilo de saída
atalho transform
propriedades individuais
Redefinir
Card
Contorno tracejado: onde o card fica no layout. Ponto escuro: o transform-origin.