Propriedade transform: Movendo, girando e escalando elementos

A propriedade transform é a base para criar efeitos visuais dinâmicos e interativos no CSS. Ela permite que você altere a posição, rotação, escala e inclinação de um elemento, tudo isso sem afetar o fluxo normal do documento (ou seja, os elementos vizinhos não são empurrados ou reposicionados).

Pense na transform como uma ferramenta de edição de imagem em tempo real para seus elementos HTML. Você pode manipular a aparência de um elemento sem mudar sua "caixa" original no layout.

Como funciona a propriedade `transform`

A propriedade transform aceita uma ou mais funções de transformação como valor. Cada função descreve uma operação específica (mover, girar, escalar, etc.).

Sintaxe básica:

.elemento {
  transform: <funcao-transformacao-1> <funcao-transformacao-2> ...;
}

Vamos explorar as funções mais comuns para mover, girar e escalar.

1. Movendo Elementos com `translate()`

A função translate() desloca um elemento de sua posição original. É como empurrar o elemento para o lado, para cima ou para baixo.

translate(X, Y): Move o elemento X unidades horizontalmente e Y unidades verticalmente.
- Valores positivos movem para a direita e para baixo.
- Valores negativos movem para a esquerda e para cima.
- Você pode usar qualquer unidade CSS (px, %, em, rem, etc.).
- Ex: transform: translate(50px, 20px); (move 50px para a direita e 20px para baixo).
- Ex: transform: translate(-50%, -50%); (muito útil para centralizar elementos, pois -50% se refere à metade da largura/altura do próprio elemento).
translateX(X): Move o elemento apenas horizontalmente.
- Ex: transform: translateX(100px);
translateY(Y): Move o elemento apenas verticalmente.
- Ex: transform: translateY(-50px);

2. Girando Elementos com `rotate()`

A função rotate() gira um elemento em torno de seu ponto central (por padrão).

rotate(angulo): Gira o elemento no sentido horário pelo ângulo especificado.
- O ângulo é geralmente expresso em deg (graus).
- Valores positivos giram no sentido horário.
- Valores negativos giram no sentido anti-horário.
- Ex: transform: rotate(45deg); (gira 45 graus no sentido horário).
- Ex: transform: rotate(-90deg); (gira 90 graus no sentido anti-horário).

3. Escalando Elementos com `scale()`

A função scale() aumenta ou diminui o tamanho de um elemento.

scale(fatorX, fatorY): Escala o elemento fatorX vezes horizontalmente e fatorY vezes verticalmente.
- Um fator de 1 mantém o tamanho original.
- Um fator maior que 1 aumenta o tamanho.
- Um fator entre 0 e 1 diminui o tamanho.
- Ex: transform: scale(1.5, 0.8); (aumenta 50% na largura, diminui 20% na altura).
scale(fator): Escala o elemento proporcionalmente (mesmo fator para largura e altura).
- Ex: transform: scale(1.2); (aumenta 20% tanto na largura quanto na altura).
scaleX(fatorX): Escala o elemento apenas horizontalmente.
- Ex: transform: scaleX(2);
scaleY(fatorY): Escala o elemento apenas verticalmente.
- Ex: transform: scaleY(0.5);

Exemplo Prático:

<!DOCTYPE html>
<html lang="pt-BR">
<head>
  <meta charset="UTF-8">
  <title>Transform: Mover, Girar, Escalar</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;
    }

    .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.2em;
      transition: transform 0.3s ease-out; /* Para ver o efeito ao passar o mouse */
      cursor: pointer;
    }

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

    /* --- Exemplos de Transform --- */

    .translate-box:hover {
      transform: translate(20px, 10px); /* Move 20px para a direita, 10px para baixo */
    }

    .rotate-box:hover {
      transform: rotate(30deg); /* Gira 30 graus no sentido horário */
    }

    .scale-box:hover {
      transform: scale(1.2); /* Aumenta 20% proporcionalmente */
    }

    .scale-x-box:hover {
      transform: scaleX(1.5); /* Aumenta 50% apenas na largura */
    }

    .scale-y-box:hover {
      transform: scaleY(0.8); /* Diminui 20% apenas na altura */
    }

    .translate-rotate-box:hover {
      transform: translateX(15px) rotate(15deg); /* Combinação de transformações */
    }
  </style>
</head>
<body>
  <div class="box translate-box">Translate</div>
  <div class="box rotate-box">Rotate</div>
  <div class="box scale-box">Scale</div>
  <div class="box scale-x-box">ScaleX</div>
  <div class="box scale-y-box">ScaleY</div>
  <div class="box translate-rotate-box">Translate + Rotate</div>
</body>
</html>

Resultado:

Passe o mouse sobre cada caixa para ver o efeito de transform em ação.
Observe como as caixas se movem, giram ou escalam sem afetar a posição das outras caixas ao redor.

Pontos Chave:

Não afeta o layout: As transformações são puramente visuais. O espaço que o elemento ocupava no layout original permanece o mesmo.
Performance: São otimizadas pelo navegador, resultando em animações suaves.
transition: Para ver as transformações acontecerem de forma suave, é comum combiná-las com a propriedade transition.
Ordem das Funções: A ordem em que você escreve as funções de transformação importa! rotate(45deg) translate(10px) não é o mesmo que translate(10px) rotate(45deg). Veremos mais sobre isso em lições futuras.

Nas próximas lições, vamos aprofundar em cada uma dessas funções e explorar outras, como skew() e transformações 3D.

Como funciona a propriedade transform

1. Movendo Elementos com translate()