Propriedade CSS transform-origin

A propriedade CSS transform-origin define o ponto ao redor do qual um elemento é transformado — o pivô para rotações, a âncora para redimensionamentos e o ponto de referência para distorções.

Por padrão, toda transformação ocorre em torno do centro do elemento (50% 50%). Rotacione uma caixa e ela gira ao redor do seu próprio centro; redimensione-a e ela cresce em todas as direções. O transform-origin permite mover esse pivô para qualquer lugar — um canto, uma borda ou até mesmo um ponto fora da caixa — de forma que a mesma transformação produza um movimento completamente diferente.

Esta página aborda a sintaxe, o comportamento dos valores de palavra-chave, porcentagem e comprimento, o valor opcional do eixo z para 3D e exemplos práticos que você pode executar.

Por que transform-origin é importante

Uma rotação tem aparência muito diferente dependendo de onde seu pivô está posicionado. Imagine o ponteiro de um relógio: girá-lo ao redor do centro descreve um pequeno círculo, mas girá-lo ao redor de sua base leva a ponta a percorrer todo o mostrador — mesmo rotate(), origem diferente.

É por isso que o transform-origin é essencial para:

Movimento articulado ou tipo dobradiça — girar ao redor de uma borda em vez do centro.
Redimensionamento a partir de um canto — expandir um menu a partir do canto superior esquerdo em vez do meio.
Viradas de cartão 3D — combinado com o deslocamento z e perspective.

A propriedade transform-origin só tem efeito quando uma função de transformação é aplicada por meio da propriedade transform — por si só, não faz nada. É uma das propriedades CSS3.

Recapitulação da sintaxe

O valor pode ser especificado com:

Palavras-chave de deslocamento — left, center, right, top, bottom (ex.: top left).
Comprimentos — medidos a partir do canto superior esquerdo do elemento (ex.: 0 0, 80px 40px).
Porcentagens — relativas ao tamanho do próprio elemento (ex.: 0% 0% é o canto superior esquerdo, 100% 100% é o canto inferior direito).

Quando apenas um valor é fornecido, o segundo assume o padrão center. Um terceiro valor define a posição no eixo z e só é relevante para transformações 3D.

Informação

Historicamente, o prefixo -webkit- era usado para Safari, Chrome e versões antigas do Opera. Os navegadores modernos não exigem mais prefixos de fornecedor para esta propriedade.

Valor Inicial	50% 50% 0
Aplica-se a	Elementos transformáveis.
Herdado	Não.
Animável	Sim. O grau é animável.
Versão	CSS3
Sintaxe DOM	Object.style.transform-origin = "10% 30%";

Sintaxe

Valores CSS de transform-origin

transform-origin: x-offset y-offset z-offset | initial | inherit;

Exemplo da propriedade transform-origin:

Exemplo de código CSS transform-origin

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .big {
        position: relative;
        height: 300px;
        width: 300px;
        margin: 80px;
        padding: 5px;
        border: 2px solid #666666;
        background-color: #eeeeee;
      }
      .little {
        padding: 60px;
        position: absolute;
        border: 2px solid #666666;
        background-color: #8ebf42;
        -webkit-transform: rotate(35deg);
        -webkit-transform-origin: 70% 90%;
        transform: rotate(35deg);
        transform-origin: 70% 90%;
      }
    </style>
  </head>
  <body>
    <h2>Transform-origin property example</h2>
    <div class="big">
      <div class="little">Box</div>
    </div>
  </body>
</html>

Experimente Você Mesmo »

Resultado

A caixa pequena é rotacionada 35°, mas como o transform-origin é 70% 90% (área inferior direita), ela gira ao redor desse ponto em vez do seu centro.

O próximo exemplo rotaciona quatro caixas idênticas pelo mesmo 25deg e apenas muda o transform-origin, para que você possa ver lado a lado como cada valor move o pivô.

Exemplo de transform-origin com quatro valores:

Outro exemplo de código CSS transform-origin

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      body {
        background-color: #eeeeee;
        font-size: 1.1em;
        font-family: 'Roboto', Helvetica, sans-serif;
      }
      .container {
        margin: 10px auto;
        max-width: 700px;
      }
      .wrap {
        width: 150px;
        height: 150px;
        border: 2px solid #666666;
        display: inline-block;
        margin: 100px;
      }
      .box {
        width: 150px;
        height: 150px;
        position: relative;
        color: #eeeeee;
        text-align: center;
        line-height: 150px;
        -webkit-transform: rotate(25deg);
        transform: rotate(25deg);
      }
      .a {
        background-color: #0747af;
      }
      .b {
        background-color: #40b530;
        -webkit-transform-origin: top left;
        transform-origin: top left;
      }
      .c {
        background-color: #666666;
        -webkit-transform-origin: 90% 120%;
        transform-origin: 90% 120%;
      }
      .d {
        background-color: #ffdb11;
        -webkit-transform-origin: 80px 40px;
        transform-origin: 80px 40px;
      }
    </style>
  </head>
  <body>
    <h2>Transform-origin property example</h2>
    <div class="container">
      <div class="wrap">
        <div class="box a">
          50% 50%
        </div>
      </div>
      <div class="wrap">
        <div class="box b">
          top left
        </div>
      </div>
      <div class="wrap">
        <div class="box c">
          90% 120%
        </div>
      </div>
      <div class="wrap">
        <div class="box d">
          80px 40px
        </div>
      </div>
    </div>
  </body>
</html>

Experimente Você Mesmo »

Analisando as quatro caixas: 50% 50% gira ao redor do centro, top left pivota no canto superior esquerdo, 90% 120% usa um ponto abaixo e à direita da caixa, e 80px 40px mede o pivô em pixels a partir do canto superior esquerdo.

O z-offset para transformações 3D

O terceiro valor move o pivô ao longo do eixo z (em direção ao espectador ou se afastando dele). Só tem efeito visível com funções de transformação 3D como rotateX() ou rotateY(), e deve ser um comprimento — porcentagens não são permitidas para o valor z.

.card {
  /* pivot at the center, pushed 50px toward the viewer */
  transform: rotateY(45deg);
  transform-origin: center center 50px;
}

Para que o efeito 3D seja visível, o elemento pai geralmente precisa de um valor perspective (e você pode deslocar o ponto de fuga com perspective-origin).

Valores

Valor	Descrição
`x-offset`	Especifica a posição horizontal. Aceita palavras-chave (`left`, `center`, `right`), comprimentos ou porcentagens.
`y-offset`	Especifica a posição vertical. Aceita palavras-chave (`top`, `center`, `bottom`), comprimentos ou porcentagens.
`z-offset`	Especifica a posição de profundidade ao longo do eixo z para transformações 3D. Aceita valores de comprimento.
`initial`	Define esta propriedade com seu valor padrão.
`inherit`	Herda esta propriedade do elemento pai.

Dicas e armadilhas

Não faz nada sozinha. Se o transform-origin parece não ter efeito, verifique se o elemento também possui um valor transform — sem ele, não há nada ao redor do que girar.
Porcentagens são relativas ao elemento, não ao seu pai: 100% 0% é o canto superior direito do próprio elemento.
A ordem é x depois y, então top left e left top são equivalentes (palavras-chave são independentes da ordem), mas 0% 100% (inferior esquerdo) e 100% 0% (superior direito) não são.
Anime transforms, não a origem, para movimentos suaves. Alterar o transform-origin durante uma animação faz o elemento pular, então defina a origem uma vez e anime a transition ou animation no transform.

Propriedades relacionadas

transform — aplica a rotação, escala, distorção ou translação ao redor da qual a origem pivota.
perspective e perspective-origin — necessários para ver a origem do eixo z em 3D.
transition e animation — animam transformações ao longo do tempo.

Prática

A propriedade transform-origin funciona somente com

elementos animáveis.elementos transformáveis.elementos posicionados.