Propriedade Scale
Última atualização: 2026-09-13
scale Propriedade Scale
A propriedade scale é uma propriedade de transformação individual que dimensiona um elemento para cima ou para baixo no espaço 2D ou 3D. Como propriedade independente, pode ser controlada separadamente de outras transformações como translate e rotate, o que é especialmente útil quando você deseja animar a escala por conta própria — para feedback de clique em botões, pré-visualização de zoom de imagens e interações semelhantes.
| Categoria | |
|---|---|
| Valor Inicial | none |
| Herdado | Não |
| Aplica-se A | |
| Tipo de Animação | |
| Versão CSS | CSS3 |
| Status | Padrão |
📝 Sintaxe
scale: none | <number> [<number> [<number>]?]?;⚙️ Valores
| Valor | Tipo | Descrição |
|---|---|---|
none | Palavra-chave | Sem escala |
<number> | Tipo | O fator de escala (x, y, z podem ser especificados) |
▶ Exemplo
Edite o código abaixo e veja o resultado ao vivo no playground:
🌐 Suporte dos Navegadores
| Navegador |  Chrome |
 Edge |
 Firefox |
 Safari |
 Opera |
|---|---|---|---|---|---|
| scale | ✓ v57 | ✓ v12 | ✓ v52 | ✓ v10.1 | ✓ v44 |
| Suportado em todos os principais navegadores | |||||
Dica： Um valor dimensiona X e Y uniformemente; dois valores controlam os eixos X e Y de forma independente; um terceiro valor também dimensiona ao longo de Z (o que precisa de uma perspectiva para ser visível).
Aviso： Um fator de escala 0 faz o elemento desaparecer completamente; um valor negativo inverte o elemento — por exemplo, scale(-1) cria um espelhamento.
❓ Perguntas Frequentes
QA propriedade scale afeta o tamanho real e o layout de um elemento?
ANão. O scale é puramente visual: o elemento ainda ocupa seu tamanho e espaço originais no fluxo do documento, e os elementos ao redor não se movem. Isso é completamente diferente de width e height, o que também significa que um elemento escalado pode transbordar o contêiner ou cobrir conteúdo adjacente — trate as fronteiras visuais por conta própria.
QQual é a diferença entre scale e alterar width/height?
AAlterar width ou height muda o tamanho do layout, dispara reflow e empurra os elementos ao redor — com pior desempenho. O scale apenas dimensiona visualmente, não afeta o layout, roda em uma camada de composição renderizada pela GPU e anima suavemente. Use scale quando quiser ampliação animada, e width/height quando realmente precisar mudar o tamanho do layout.
QQual é a diferença entre a propriedade scale e o zoom no CSS?
AO scale é uma transformação padrão de CSS: altera apenas o tamanho visual, não muda o espaço de layout, anima na camada de composição e tem bom desempenho. O zoom é uma propriedade não padronizada que também muda o tamanho real de layout do elemento e a renderização dos filhos, afetando o fluxo do documento e disparando reflow. Para consistência entre navegadores e desempenho de animação, o scale é melhor — prefira-o em produção.
QComo espelho um elemento como uma imagem refletida com um scale negativo?
AUm fator negativo inverte o elemento ao longo do eixo correspondente: scale: -1 cria um espelhamento horizontal ao longo de X (esquerda-direita invertida), e scale: 1 -1 inverte verticalmente ao longo de Y. O espelhamento afeta apenas o visual, não o layout. Você pode combiná-lo com transições ou animações para um efeito de virada, mas lembre-se de que o texto também é espelhado — se necessário, corrija compondo várias transformações.
🏷️ Propriedades Relacionadas
💡 Casos relacionados
📚 Tutoriais Relacionados
