Transformar-origem - CSS-Tricks

A transform-originpropriedade é usada em conjunto com as transformações CSS, permitindo alterar o ponto de origem de uma transformação.

.box ( transform: rotate(360deg); transform-origin: top left; )

Conforme indicado acima, a transform-originpropriedade pode ter até duas palavras-chave separadas por espaço ou valores de comprimento para uma transformação 2D e até três valores para uma transformação 3D.

Usar o código acima em uma caixa de 200 x 200 pixels, com a transformação aplicada a uma transição usando um evento de clique, se comportaria assim:

Confira esta Caneta!

Por padrão, a origem de uma transformação é “50% 50%”, que está exatamente no centro de qualquer elemento. Alterar a origem para “superior esquerdo” (como na demonstração acima) faz com que o elemento use o canto superior esquerdo do elemento como um ponto de rotação.

Os valores podem ser comprimentos, percentagens ou as palavras-chave top, left, right, bottom, e center.

O primeiro valor é a posição horizontal, o segundo valor é a vertical e o terceiro valor representa a posição no eixo Z. O terceiro valor só funcionará se você estiver usando transformações 3D e não pode ser uma porcentagem.

Veja a ilustração Pen transform-origin de Shaw (@shshaw) no CodePen.