Propriedade transform-origin
A propriedade transform-origin define o ponto,
em relação ao qual as transformações do elemento
serão realizadas, definidas pela propriedade transform.
Por padrão, este ponto é o centro do elemento,
e, por exemplo, a rotação ocorrerá em relação
ao seu centro. No entanto, este comportamento pode ser alterado
e fazer com que o elemento gire em relação
à sua lateral, canto ou até mesmo em relação a um
ponto que está fora do elemento.
Sintaxe
seletor {
transform-origin: eixo-X eixo-Y eixo-Z;
}
Os valores para os eixos Y e Z não são obrigatórios, podem ser omitidos (assumirão os valores padrão). O deslocamento do ponto ao longo do eixo Z é necessário para transformações 3D.
Valores para o eixo X
| Valor | Descrição |
|---|---|
| Unidades CSS | O valor pode ser qualquer unidade para tamanhos, que define o deslocamento do centro de transformação a partir da borda esquerda do elemento. Um valor positivo desloca o centro de transformação para a direita (para dentro do elemento), e um negativo - para a esquerda (para fora do elemento) em relação à borda esquerda do elemento. |
left |
Ponto de rotação horizontal na borda esquerda do elemento. |
right |
Ponto de rotação horizontal na borda direita do elemento. |
center |
Ponto de rotação horizontal no centro do elemento. |
Valor padrão: center.
Valores para o eixo Y
| Valor | Descrição |
|---|---|
| Unidades CSS | O valor pode ser qualquer unidade para tamanhos, que define o deslocamento do centro de transformação a partir da borda superior do elemento. Um valor positivo desloca o centro de transformação para baixo (para dentro do elemento), e um negativo - para cima (para fora do elemento) em relação à borda superior do elemento. |
top |
Ponto de rotação vertical na borda superior do elemento. |
bottom |
Ponto de rotação vertical na borda inferior do elemento. |
center |
Ponto de rotação vertical no centro do elemento. |
Valor padrão: center.
Valores para o eixo Z
| Valor | Descrição |
|---|---|
| Unidades CSS | O valor pode ser qualquer unidade para tamanhos, que define o deslocamento do centro de transformação a partir do plano do elemento. Um valor positivo o desloca para nós (para fora da tela), e um negativo para longe de nós. |
Valor padrão: 0px.
Exemplo
Atualmente, o valor da propriedade transform-origin não está definido e o bloco girará em relação ao seu centro. Passe o mouse sobre o bloco para ver o efeito:
<div id="elem">lorem ipsum</div>
#elem {
border: 1px solid black;
width: 100px;
height: 50px;
}
#elem:hover {
transform-origin: center center;
transform: rotate(30deg);
}
:
Exemplo
Agora, ao passar o mouse, o bloco girará em relação ao canto superior esquerdo:
<div id="elem">lorem ipsum</div>
#elem {
border: 1px solid black;
width: 100px;
height: 50px;
}
#elem:hover {
transform-origin: 0px 0px;
transform: rotate(30deg);
}
:
Exemplo
Agora, ao passar o mouse, o bloco girará em relação
ao canto inferior direito. Para isso, deve-se posicionar
o ponto de transformação a 100% para a direita
e a 100% para baixo (poderíamos definir
em px, mas se as dimensões do elemento mudassem,
o ponto de transformação permaneceria no mesmo lugar,
portanto é melhor usar %):
<div id="elem">lorem ipsum</div>
#elem {
border: 1px solid black;
width: 100px;
height: 50px;
}
#elem:hover {
transform-origin: 100% 100%;
transform: rotate(30deg);
}
:
Exemplo
Vamos girar o bloco em relação ao canto superior direito:
<div id="elem">lorem ipsum</div>
#elem {
border: 1px solid black;
width: 100px;
height: 50px;
}
#elem:hover {
transform-origin: 100% 0%;
transform: rotate(30deg);
}
:
Exemplo
Vamos girar o bloco em relação ao centro do lado esquerdo.
Para isso, para o eixo X definimos left (o ponto
de rotação estará à esquerda), e para o eixo Y - center
(o ponto de rotação estará no centro verticalmente):
<div id="elem">lorem ipsum</div>
#elem {
border: 1px solid black;
width: 100px;
height: 50px;
}
#elem:hover {
transform-origin: left center;
transform: rotate(30deg);
}
:
Exemplo
A propriedade pode ser aplicada não apenas para rotação,
mas também para outras transformações. Vamos aumentar
a escala usando scale, definindo o ponto
de transformação como o canto inferior esquerdo:
<div id="elem">lorem ipsum</div>
#elem {
border: 1px solid black;
width: 100px;
height: 50px;
}
#elem:hover {
transform-origin: left bottom;
transform: scale(1.5);
}
:
Exemplo
Agora, vamos definir o ponto de transformação como o canto superior direito:
<div id="elem">lorem ipsum</div>
#elem {
border: 1px solid black;
width: 100px;
height: 50px;
}
#elem:hover {
transform-origin: right top;
transform: scale(1.5);
}
:
Exemplo
O ponto de transformação também pode ser definido fora do elemento. No próximo exemplo, ao passar o mouse sobre o bloco vermelho, o bloco preto realizará uma rotação em relação a um ponto que está fora dele:
<div id="hover"></div>
<div id="elem"></div>
#hover {
border: 1px solid red;
width: 50px;
height: 50px;
}
#elem {
border: 1px solid black;
width: 100px;
height: 50px;
transition: transform 1s;
transform-origin: -100px -100px;
}
#hover:hover + #elem {
transform: rotate(30deg);
}
:
