Propriedade Zoom
Última atualização: 2026-09-13
zoom Propriedade Zoom
A propriedade zoom aplica uma transformação de escala não padrão, ampliando ou reduzindo um elemento e todos os seus filhos proporcionalmente. Diferente de transform: scale(), o zoom afeta o espaço de layout do elemento — ele ocupa o espaço real dimensionado — e dispara um reflow completo. Embora não seja CSS padrão, o suporte dos navegadores é amplo.
| Categoria | |
|---|---|
| Valor Inicial | normal |
| Herdado | Não |
| Aplica-se A | |
| Tipo de Animação | |
| Versão CSS | CSS3 |
| Status | Padrão |
📝 Sintaxe
zoom: normal | reset | <number> | <percentage>;⚙️ Valores
| Valor | Tipo | Descrição |
|---|---|---|
normal | reset | Palavra-chave | Valores predefinidos |
<number> | <percentage> | Tipo | O fator de zoom |
▶ Exemplo
Edite o código abaixo e veja o resultado ao vivo no playground:
🌐 Suporte dos Navegadores
| Navegador |  Chrome |
 Edge |
 Firefox |
 Safari |
 Opera |
|---|---|---|---|---|---|
| zoom | ✓ v10 | ✓ v12 | ✓ v1 | ✓ v1 | ✓ v1 |
| Suportado em todos os principais navegadores | |||||
Aviso： zoom não é padrão e nem consta na especificação CSS. O Firefox não o suporta (versões antigas não suportam de forma alguma; versões mais novas apenas com a flag layout.css.zoom.enabled).
Dica： Para um efeito de escala padrão e bem suportado, use transform: scale(); o zoom serve para protótipos rápidos ou projetos internos.
❓ Perguntas Frequentes
QQual é a diferença entre a propriedade zoom e transform: scale()?
Azoom muda o espaço real ocupado e o tamanho de layout do elemento no fluxo do documento, afetando elementos ao redor — equivalente a um reflow. transform: scale() só muda o tamanho visual e mantém o espaço de layout. O zoom também afeta o tamanho renderizado dos filhos (ampliação geral de pixels) e dispara um reflow completo. Para consistência entre navegadores, transform: scale() é mais confiável.
QO que significa exatamente o valor reset da propriedade zoom em CSS?
Areset é um valor não padrão introduzido pela Safari, significando redefinir o zoom, equivalente a zoom: 1 mas impede que um valor de zoom herdado continue a afetar o elemento. O padrão normal significa que o zoom corresponde ao zoom da página definido pelo usuário (equivalente a 1). reset tem casos de uso limitados e seu suporte é majoritariamente em motores WebKit — teste em vários navegadores.
QQuão bem o zoom é suportado e o Firefox o suporta?
Azoom era historicamente uma propriedade não padrão do IE/WebKit; Chrome, Edge e Safari dão bom suporte. O Firefox só a habilitou por padrão na versão 126 (2024). Embora esteja começando a entrar na especificação CSS Viewport, segue sendo um padrão de facto. Para escala entre navegadores em produção, prefira o padrão transform: scale().
QA propriedade zoom do CSS afeta o desempenho de renderização da página?
ASim. zoom muda as dimensões de layout, então o dimensionamento dispara reflow e repaint, e o desempenho de animação é claramente pior que transform: scale(). zoom serve para escala única de uma página ou componente (como dimensionar todo o layout para caber), não para animação quadro a quadro. Para escala animada, prefira transform: scale(); use zoom quando realmente precisar de uma mudança real no tamanho do layout.
🏷️ Propriedades Relacionadas
💡 Casos relacionados
📚 Tutoriais Relacionados
