transform-origin

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since September 2015.

A propriedade transform-origin define a origem das transformações de um elemento no CSS.

Experimente

A origem da transformação é o ponto em torno do qual uma transformação é aplicada. Por exemplo, a origem da transformação da função rotate() é o centro de rotação.

Na prática, essa propriedade envolve um par de translações em torno das outras transformações do elemento. A primeira translação move a origem da transformação para a origem real em ( 0 , 0 ) . Em seguida, as outras transformações são aplicadas e, porque a origem da transformação está em ( 0 , 0 ) , essas transformações atuam em relação à origem da transformação. Por fim, a translação oposta é aplicada, movendo a origem da transformação de volta à sua localização original. Consequentemente, essa definição

css
transform-origin: -100% 50%;
transform: rotate(45deg);

resulta na mesma transformação que

css
transform-origin: 0 0;
transform: translate(-100%, 50%) rotate(45deg) translate(100%, -50%);

Lendo da direita para a esquerda, translate(100%, -50%) é a tradução para trazer a origem da transformação para a origem real, rotate(45deg) é a transformação original e translate(-100%, 50%) é a tradução para restaurar a origem da transformação à sua localização original.

Por padrão, a origem de uma transformação é center (centro).

Sintaxe

css
/* One-value syntax */
transform-origin: 2px;
transform-origin: bottom;

/* x-offset | y-offset */
transform-origin: 3cm 2px;

/* x-offset-keyword | y-offset */
transform-origin: left 2px;

/* x-offset-keyword | y-offset-keyword */
transform-origin: right top;

/* y-offset-keyword | x-offset-keyword */
transform-origin: top right;

/* x-offset | y-offset | z-offset */
transform-origin: 2px 30% 10px;

/* x-offset-keyword | y-offset | z-offset */
transform-origin: left 5px -3px;

/* x-offset-keyword | y-offset-keyword | z-offset */
transform-origin: right bottom 2cm;

/* y-offset-keyword | x-offset-keyword | z-offset */
transform-origin: bottom right 2cm;

/* Global values */
transform-origin: inherit;
transform-origin: initial;
transform-origin: revert;
transform-origin: revert-layer;
transform-origin: unset;

A propriedade transform-origin pode ser especificada usando um, dois ou três valores, onde cada valor representa um deslocamento. Deslocamentos que não são definidos explicitamente são redefinidos para seus respectivos valores iniciais.

Se um único valor <length> ou <percentage> for definido, ele representa o deslocamento horizontal.

Se dois ou mais valores forem definidos e nenhum deles for uma palavra-chave, ou a única palavra-chave utilizada for center, então o primeiro valor representa o deslocamento horizontal e o segundo representa o deslocamento vertical.

  • Sintaxe de um valor:

    • O valor deve ser um <length>, um <percentage>, ou uma das palavras-chave left, center, right, top e bottom.
  • Sintaxe de dois valores:

  • Sintaxe de três valores:

    • Os dois primeiros valores são os mesmos da sintaxe de dois valores.
    • O terceiro valor deve ser um <length>. Ele representa sempre o deslocamento Z.

Valores

x-offset

É um <length> ou um <percentage> que descreve a distância a partir da borda esquerda da caixa onde a origem da transformação é definida.

offset-keyword

É uma das palavras-chave left, right, top, bottom ou center que descreve o deslocamento correspondente.

y-offset

É um <length> ou um <percentage> que descreve a distância a partir da borda superior da caixa onde a origem da transformação é definida.

x-offset-keyword

É uma das palavras-chave left, right ou center que descreve a distância a partir da borda esquerda da caixa onde a origem da transformação é definida.

y-offset-keyword

É uma das palavras-chave top, bottom ou center que descreve a distância a partir da borda superior da caixa onde a origem da transformação é definida.

z-offset

É um <length> (e nunca um <percentage> que tornaria a afirmação inválida) que descreve a distância do olho do usuário onde a origem z=0 é definida.

As palavras-chave são atalhos convenientes e correspondem aos seguintes valores de <percentage>:

Keyword Value
left 0%
center 50%
right 100%
top 0%
bottom 100%

Definição formal

Initial value50% 50% 0
Aplica-se aqualquer elemento transformavel
Inheritednão
Percentagesrefer to the size of bounding box
Computed valuefor length the absolute value, otherwise a percentage
Animation typesimple list of length, percentage, or calc

Nota: O valor inicial de transform-origin é 0 0 para todos os elementos SVG, exceto para elementos <svg> raiz e elementos <svg> que são filhos diretos de um elemento foreignObject, cujo transform-origin é 50% 50%, assim como outros elementos CSS. Consulte o atributo transform-origin do SVG para obter mais informações.

Sintaxe formal

transform-origin = 
[ left | center | right | top | bottom | <length-percentage> ] |
[ left | center | right | <length-percentage> ] [ top | center | bottom | <length-percentage> ] <length>? |
[ [ center | left | right ] && [ center | top | bottom ] ] <length>?

<length-percentage> =
<length> |
<percentage>

Exemplos

Uma demonstração de vários valores de transformação

Este exemplo mostra o efeito de escolher diferentes valores de transform-origin para uma variedade de funções de transformação.

Especificações

Specification
CSS Transforms Module Level 1
# transform-origin-property

Compatibilidade com navegadorres

BCD tables only load in the browser

Veja também