Propriedade transform-origin: Definindo o ponto de pivô

Você já aprendeu a mover, girar, escalar e distorcer elementos usando as funções da propriedade transform. Mas há um detalhe importante: de onde essas transformações partem? Por padrão, todas as transformações 2D e 3D ocorrem a partir do centro do elemento.

A propriedade transform-origin permite que você mude esse ponto de referência, ou o ponto de pivô, para qualquer lugar dentro ou até mesmo fora do elemento. Isso abre um mundo de possibilidades para criar animações e efeitos muito mais precisos e interessantes.

Pense no transform-origin como o "prego" ou "pivô" em torno do qual seu elemento vai se mover, girar ou escalar. Se você gira uma porta, ela gira em torno de suas dobradiças (o pivô). Se você gira uma roda, ela gira em torno de seu eixo central. O transform-origin define onde essas "dobradiças" ou "eixo" estão.

Como funciona transform-origin

A propriedade transform-origin aceita um, dois ou três valores que representam as coordenadas X, Y e Z do ponto de pivô.

Valores para X (Horizontal)

• Palavras-chave: left, center (padrão), right
• Unidades: px, %, em, rem, etc. (Ex: 25px, 50%)

Valores para Y (Vertical)

• Palavras-chave: top, center (padrão), bottom
• Unidades: px, %, em, rem, etc. (Ex: 25px, 50%)

Valores para Z (Profundidade)

• Unidades: px, em, rem, etc. (Ex: 50px)
  • 0 é o valor padrão.

Sintaxe e Exemplos:

1. Um valor (define X, Y assume center)

.elemento {
  transform-origin: left; /* Equivalente a left center 0 */
}
.elemento {
  transform-origin: 25%; /* Equivalente a 25% center 0 */
}

2. Dois valores (define X e Y)

.elemento {
  transform-origin: left top; /* Canto superior esquerdo */
}
.elemento {
  transform-origin: 20px 30px; /* 20px da esquerda, 30px do topo */
}
.elemento {
  transform-origin: 75% 25%; /* 75% da largura, 25% da altura */
}

• Ordem: O primeiro valor é sempre para o eixo X, o segundo para o eixo Y.

3. Três valores (define X, Y e Z)

.elemento {
  transform-origin: left top 50px; /* Canto superior esquerdo, 50px de profundidade */
}
.elemento {
  transform-origin: 50% 50% -20px; /* Centro do elemento, 20px para trás */
}

• Ordem: O primeiro valor é para X, o segundo para Y, o terceiro para Z.

Exemplo Prático:

<!DOCTYPE html>
<html lang="pt-BR">
<head>
  <meta charset="UTF-8">
  <title>Propriedade transform-origin</title>
  <style>
    body {
      font-family: Arial, sans-serif;
      display: flex;
      flex-wrap: wrap;
      gap: 40px;
      justify-content: center;
      align-items: center;
      min-height: 100vh;
      background-color: #f4f4f4;
      padding: 20px;
      perspective: 800px; /* Para ver transform-origin Z */
    }

    .container {
      width: 150px;
      height: 150px;
      border: 2px dashed #999;
      display: flex;
      justify-content: center;
      align-items: center;
      position: relative; /* Para referência de posicionamento do ponto de origem */
    }

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

    .box:hover {
      background-color: #FFC300;
    }

    /* --- Exemplos de transform-origin --- */

    .origin-center .box {
      transform-origin: center center; /* Padrão, mas explícito */
    }
    .origin-center .box:hover {
      transform: rotate(45deg) scale(1.2);
    }

    .origin-top-left .box {
      transform-origin: top left; /* Canto superior esquerdo */
    }
    .origin-top-left .box:hover {
      transform: rotate(45deg) scale(1.2);
    }

    .origin-bottom-right .box {
      transform-origin: 100% 100%; /* Canto inferior direito */
    }
    .origin-bottom-right .box:hover {
      transform: rotate(45deg) scale(1.2);
    }

    .origin-custom .box {
      transform-origin: 25% 75%; /* Ponto personalizado */
    }
    .origin-custom .box:hover {
      transform: rotate(45deg) scale(1.2);
    }

    .origin-z .box {
      transform-origin: center center -50px; /* Ponto de pivô 50px para trás */
    }
    .origin-z .box:hover {
      transform: rotateY(60deg); /* Gira em torno do eixo Y */
    }
  </style>
</head>
<body>
  <div class="container origin-center">
    <div class="box">Centro (Padrão)</div>
  </div>
  <div class="container origin-top-left">
    <div class="box">Top Left</div>
  </div>
  <div class="container origin-bottom-right">
    <div class="box">Bottom Right</div>
  </div>
  <div class="container origin-custom">
    <div class="box">25% 75%</div>
  </div>
  <div class="container origin-z">
    <div class="box">Origin Z</div>
  </div>
</body>
</html>

Resultado:

• Passe o mouse sobre cada caixa.
• Observe como a rotação e a escala mudam drasticamente dependendo de onde o transform-origin está definido.
• Na caixa "Origin Z", a rotação em Y parece mais pronunciada, pois o pivô está "atrás" do elemento.

Pontos Chave:

• Padrão: center center 0 (ou 50% 50% 0).
• Flexibilidade: Você pode usar palavras-chave (left, top, right, bottom, center) ou unidades de comprimento (px, %, em, rem) para definir as coordenadas X, Y e Z.
• Impacto: O transform-origin afeta todas as transformações (translate, rotate, scale, skew).
• Contexto 3D: Para que o valor Z de transform-origin tenha um efeito visível, o elemento precisa estar em um contexto 3D (com perspective em um ancestral) e a transformação aplicada deve ser 3D (ex: rotateX, rotateY, rotate3d).

Dominar transform-origin é fundamental para criar animações e interações mais sofisticadas e controladas, permitindo que você defina exatamente como seus elementos se comportarão visualmente.