Solucionado
Boa tarde. Estava fazendo o exercicio mencionado acima e em uma das respostas erradas, é feita a seguinte justificativa:
"O correto seria fazermos a translação por último. Da forma como está, o scale aumentaria a translação."
Não entendi pq isso é verdade, ja que a translação é feita de 300px e px é um valor absoluto, pq o scale aumentaria a translação?
Andris,
No exercício, fazemos 3 coisas: rotate, scale e translate.
Rotacionar, escalar e só depois transladar (mover) vai ter um efeito. Transladar primeiro e depois rotacionar e escalar vai ter outro.
O porquê disso é a translação vai seguir a "direção" diagonal, caso seja aplicada depois da rotação.
De maneira parecida, a translação irá mais longe se aplicada depois da escala.
Veja:
O quadrado vermelho e pontilhado é o original.
O verde tem apenas a escala aplicada. O azul, apenas a rotação. O amarelo, apenas a translação.
O cinza tem translação aplicada primeiro, depois a escala, depois a rotação. Perceba que fica sobre o amarelo, o que tem apenas a translação. Depois roda e aumenta.
O laranja tem rotação aplicada primeiro, depois a translação, depois a escala. Perceba que segue uma direção "diagonal" em relação ao azul, o que tem apenas a rotação.
O roxo tem rotação aplicada primeiro, depois a escala, depois a translação. Perceba que o quadrado foi mais longe que o laranja, porque foi movida quando já estava maior.
O código está em: https://codepen.io/alexandreaquiles/pen/xLjpew/left?editors=1100#0
Pelo que eu entendi, quando vc rotaciona, o eixo X rotaciona junto? Pq pra mim, o plano adotado deveria ser o mesmo independente da rotação do objeto.
Quanto a ele ir mais longe, então o ponto que se desloca 300px não seria o centro dele?
Obs: Acredito que o meu problema sejam os muitos cálculos e físicas que fiz na faculdade kkkk
Sim! O eixo X é rotacionado junto!
Quando ao ir mais longe, se você calcular com alguma ferramenta de medição (tem nos Gimp/Photoshop da vida), verá que o centro do roxo está a 450px em relação ao centro original, do vermelho.
Como usamos scale(1.5), bate: 300px * 1.5 = 450px
É verdade! Obrigado Alexandre! Esclareceu o que eu precisava!