Propriedade transform
Última atualização: 2026-09-13
transform Propriedade transform
A propriedade transform aplica transformações geométricas 2D ou 3D a um elemento, incluindo translação, rotação, escala e inclinação (skew). As transformações acontecem na etapa de renderização e não afetam o layout do fluxo do documento, o que a torna uma ferramenta comum para efeitos visuais de alta performance. O transform é uma das propriedades centrais da animação CSS e do design de interação.
| Categoria | |
|---|---|
| Valor Inicial | none |
| Herdado | Não |
| Aplica-se A | todos |
| Tipo de Animação | transform |
| Versão CSS | CSS3 |
| Status | Padrão |
📝 Sintaxe
transform: none | <transform-function>+;
/* <transform-function> = translate() | translate3d() | rotate() | rotate3d() | scale() | skew() | matrix() | perspective() etc. */⚙️ Valores
| Valor | Tipo | Descrição |
|---|---|---|
none | Palavra-chave | Nenhuma transformação é aplicada |
<transform-list> | Tipo | Uma lista de funções de transform: translate, rotate, scale, skew e outras |
▶ Exemplo
Edite o código abaixo e veja o resultado ao vivo no playground:
🌐 Suporte dos Navegadores
| Navegador |  Chrome |
 Edge |
 Firefox |
 Safari |
 Opera |
|---|---|---|---|---|---|
| transform | ✓ v36 | ✓ v12 | ✓ v16 | ✓ v9 | ✓ v23 |
| Suportado em todos os principais navegadores | |||||
Dica： Várias funções de transform em um único valor são separadas por espaços e aplicadas da direita para a esquerda — a função mais à direita é aplicada primeiro — então a ordem importa e mudá-la pode produzir um resultado diferente.
Aviso： O transform cria um novo contexto de empilhamento e um bloco de contenção, o que pode mudar a referência de posicionamento dos filhos com position: fixed.
❓ Perguntas Frequentes
QA propriedade CSS transform afeta o layout dos elementos ao redor?
ANão. O transform é uma transformação visual tratada durante a composição: o elemento ainda ocupa seu espaço e tamanho originais no fluxo do documento, então os elementos ao redor não são afetados e nenhum reflow é disparado. É exatamente por isso que animações com transform têm desempenho muito melhor do que animar left ou top. Observe que o elemento transformado se torna o bloco de contenção para quaisquer descendentes com position: fixed.
QQual é a diferença entre transform 2D e 3D?
ATransformações 2D atuam no plano X/Y — translate(), rotate(), scale() e skew(). Transformações 3D adicionam o eixo Z com funções como translateZ, rotateX e rotateY. Para ver profundidade real, geralmente você precisa de uma perspective no elemento pai, frequentemente combinada com transform-style: preserve-3d para que os filhos mantenham suas posições 3D.
QPor que as animações com transform são rápidas? Elas usam aceleração GPU?
AAnimar o transform nunca dispara layout ou repaint. O navegador promove o elemento para sua própria camada de compositor, que a GPU compõe, então o movimento permanece suave mesmo enquanto a página rola ou se sobrepõe a outros elementos. Comparado com left/top, que forçam um reflow a cada quadro, o transform é a forma preferida de alcançar animação a 60fps, e adicionar will-change deixa o resultado ainda mais estável.
QEm que ordem as funções de transform são aplicadas? Translate antes de rotate faz diferença?
AAs funções são aplicadas da direita para a esquerda: a mais à direita entra em vigor primeiro. Por exemplo, transform: translate(20px) rotate(45deg) rotaciona primeiro e depois traduz na direção rotacionada, enquanto transform: rotate(45deg) translate(20px) traduz primeiro e depois rotaciona — os resultados finais são completamente diferentes.
🏷️ Propriedades Relacionadas
💡 Casos relacionados
📚 Tutoriais Relacionados
