Eu não entendi o funcionamento do transform-origin. Poderiam me explicar mais? e também os possíveis valores que ele pode ter e o que eles indicam... e porque "transform-origin: 0 0" indica uma rotacao com base no canto superior esquerdo?
Solucionado
Eu não entendi o funcionamento do transform-origin. Poderiam me explicar mais? e também os possíveis valores que ele pode ter e o que eles indicam... e porque "transform-origin: 0 0" indica uma rotacao com base no canto superior esquerdo?
Oi Victor, tudo bem?
Melhor referência e explicação que posso te dar é a página que fala do transform-origin no MDN.
Ele indica o ponto (X e Y) onde que a transformação do elemento deve começar.
Se você usa um rotate() ele gira no centro do elemento, certo? Mudando o origin ele pode girar como no segundo exemplo do link supracitado, dando ideia que está pendurado.
Uma analogia: pense no transform-origin como um prego, e o elemento que está com ele como uma cartolina. Se você muda a posição em que esse prego está a cartolina vai girar de forma totalmente diferente se comparado com o meio (que é o local do prego por padrão).
Espero ter ajudado e bom domingo,
Abcs!
Oi Victor,
Se consegui te ajudar, marque minha resposta como solução por favor?
Isso em todos seus tópicos, para que todos da plataforma saibam que sua dúvida foi sanada.
Abcs!