Função scale(): Aumentando e diminuindo elementos

A função scale() da propriedade transform é usada para mudar o tamanho de um elemento. Você pode fazer um elemento parecer maior ou menor, como se estivesse usando uma lupa ou um redutor. Isso é extremamente útil para criar efeitos de zoom, destacar elementos interativos ou simplesmente ajustar a proporção de um item visualmente.

Pense na função scale() como uma "lupa mágica" que você aplica ao seu elemento. Ela o faz parecer maior ou menor, mas o espaço que ele realmente ocupa no layout (seu tamanho original) não muda.

Como funciona scale()

A função scale() aceita um ou dois valores numéricos (fatores de escala) que representam o quanto o elemento deve ser ampliado ou reduzido ao longo dos eixos X (horizontal) e Y (vertical).

1. scale(fator) (2D)

Esta é a forma mais comum e escala o elemento proporcionalmente, aplicando o mesmo fator de escala tanto na largura quanto na altura.

• fator: Um número que representa o fator de escala.
  • 1: O elemento mantém seu tamanho original.
  • Maior que 1: O elemento é ampliado. Ex: 1.5 aumenta em 50%.
  • Entre 0 e 1: O elemento é reduzido. Ex: 0.5 reduz pela metade.
  • 0: O elemento se torna invisível (tamanho zero).
  • Valores negativos: O elemento é espelhado e escalado.

Sintaxe: transform: scale(<fator>);

Exemplos:

• transform: scale(1.2);
  • Aumenta o elemento em 20% (1.2 vezes o tamanho original) tanto na largura quanto na altura.
• transform: scale(0.7);
  • Reduz o elemento em 30% (0.7 vezes o tamanho original) tanto na largura quanto na altura.

2. scale(fatorX, fatorY) (2D)

Permite escalar o elemento de forma não proporcional, aplicando fatores de escala diferentes para a largura e a altura.

• fatorX: Fator de escala para o eixo horizontal (largura).
• fatorY: Fator de escala para o eixo vertical (altura).

Sintaxe: transform: scale(<fatorX>, <fatorY>);

Exemplos:

• transform: scale(2, 0.5);
  • Dobra a largura do elemento e reduz sua altura pela metade.
• transform: scale(1, 1.5);
  • Mantém a largura original e aumenta a altura em 50%.

3. scaleX(fatorX) (2D)

Escala o elemento apenas ao longo do eixo horizontal (X).

Sintaxe: transform: scaleX(<fatorX>);

Exemplo:

• transform: scaleX(1.8);
  • Aumenta a largura do elemento em 80%.

4. scaleY(fatorY) (2D)

Escala o elemento apenas ao longo do eixo vertical (Y).

Sintaxe: transform: scaleY(<fatorY>);

Exemplo:

• transform: scaleY(0.6);
  • Reduz a altura do elemento em 40%.

5. scaleZ(fatorZ) (3D)

Escala o elemento ao longo do eixo de profundidade (Z). Para que scaleZ() tenha um efeito visível, o elemento precisa estar em um contexto 3D (com perspective no ancestral) e ter alguma profundidade para ser escalada (por exemplo, um elemento 3D ou um elemento com transform: translateZ() aplicado).

Sintaxe: transform: scaleZ(<fatorZ>);

Exemplo:

• transform: scaleZ(2);
  • Dobra a profundidade percebida do elemento.

6. scale3d(fatorX, fatorY, fatorZ) (3D)

Esta é a forma 3D completa, permitindo escalar o elemento em todos os três eixos de uma vez.

Sintaxe: transform: scale3d(<fatorX>, <fatorY>, <fatorZ>);

Exemplo:

• transform: scale3d(1.2, 1.2, 1.5);
  • Aumenta largura e altura em 20%, e a profundidade em 50%.

Exemplo Prático:

<!DOCTYPE html>
<html lang="pt-BR">
<head>
  <meta charset="UTF-8">
  <title>Função scale()</title>
  <style>
    body {
      font-family: Arial, sans-serif;
      display: flex;
      flex-wrap: wrap;
      gap: 30px;
      justify-content: center;
      align-items: center;
      min-height: 100vh;
      background-color: #f4f4f4;
      padding: 20px;
      perspective: 1000px; /* Para ver o efeito 3D */
    }

    .box {
      width: 120px;
      height: 120px;
      background-color: #4CAF50;
      border: 2px solid #388E3C;
      display: flex;
      justify-content: center;
      align-items: center;
      color: white;
      font-weight: bold;
      font-size: 1.1em;
      transition: transform 0.3s ease-out; /* Transição suave */
      cursor: pointer;
      transform-style: preserve-3d; /* Para 3D */
    }

    .box:hover {
      background-color: #66BB6A;
    }

    /* --- Exemplos de scale() --- */

    .scale-proportional-box:hover {
      transform: scale(1.3); /* Aumenta 30% proporcionalmente */
    }

    .scale-non-proportional-box:hover {
      transform: scale(1.5, 0.7); /* Aumenta largura em 50%, diminui altura em 30% */
    }

    .scale-x-box:hover {
      transform: scaleX(2); /* Dobra a largura */
    }

    .scale-y-box:hover {
      transform: scaleY(0.5); /* Reduz a altura pela metade */
    }

    .scale-z-box {
      /* Para ver scaleZ, o elemento precisa ter alguma 'profundidade' */
      transform: rotateX(20deg) rotateY(20deg); /* Damos uma rotação inicial para que a profundidade seja visível */
    }
    .scale-z-box:hover {
      transform: rotateX(20deg) rotateY(20deg) scaleZ(3); /* Aumenta a profundidade percebida */
    }

    .scale3d-box {
      transform: rotateX(20deg) rotateY(20deg);
    }
    .scale3d-box:hover {
      transform: rotateX(20deg) rotateY(20deg) scale3d(1.1, 1.1, 2); /* Escala em X, Y e Z */
    }
  </style>
</head>
<body>
  <div class="box scale-proportional-box">scale(fator)</div>
  <div class="box scale-non-proportional-box">scale(X,Y)</div>
  <div class="box scale-x-box">scaleX(X)</div>
  <div class="box scale-y-box">scaleY(Y)</div>
  <div class="box scale-z-box">scaleZ(Z)</div>
  <div class="box scale3d-box">scale3d(X,Y,Z)</div>
</body>
</html>

Resultado:

• Passe o mouse sobre cada caixa para ver o efeito de scale() em ação.
• Observe como a caixa scale-z-box parece "engrossar" ou "afinar" quando você passa o mouse, devido à escala na profundidade.

Pontos Chave:

• Fator de Escala: 1 é o tamanho original. Valores maiores que 1 aumentam, valores menores que 1 diminuem.
• Não afeta o layout: Assim como translate() e rotate(), scale() é uma transformação visual e não altera o espaço que o elemento ocupa no fluxo do documento.
• Ponto de Pivô: Por padrão, a escala ocorre a partir do centro do elemento. Você pode mudar isso com a propriedade transform-origin, que veremos em uma lição futura.
• Contexto 3D: Para scaleZ() e scale3d() terem um efeito visual de profundidade, um elemento ancestral precisa ter a propriedade perspective definida, e o elemento em si precisa ter alguma "profundidade" para ser escalada (geralmente por outras transformações 3D).

A função scale() é excelente para criar efeitos de destaque, zoom em imagens, botões interativos e outras animações que envolvem a mudança de tamanho de elementos.