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 . Em seguida, as outras transformações são aplicadas e, porque a origem da transformação está em , 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
transform-origin: -100% 50%;
transform: rotate(45deg);
resulta na mesma transformação que
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
/* 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-chaveleft
,center
,right
,top
ebottom
.
- O valor deve ser um
- Sintaxe de dois valores:
- Um valor deve ser um
<length>
, um<percentage>
, ou uma das palavras-chaveleft
,center
eright
. - O outro valor deve ser um
<length>
, um<percentage>
, ou uma das palavras-chavetop
,center
ebottom
.
- Um valor deve ser um
- 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
oucenter
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
oucenter
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
oucenter
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 value | 50% 50% 0 |
---|---|
Aplica-se a | qualquer elemento transformavel |
Inherited | não |
Percentages | refer to the size of bounding box |
Computed value | for length the absolute value, otherwise a percentage |
Animation type | simple 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