Em todas as respostas erradas diz na descrição que "O correto seria fazermos a translação por último", porem as duas alternativas corretas mostram a translação primeiro
Você está vendo a versão anterior da nova experiência da Alura que estamos preparando para você. Em breve, ela ganha uma identidade visual novinha totalmente pensada em potencializar seus estudos!
Solucionado
Em todas as respostas erradas diz na descrição que "O correto seria fazermos a translação por último", porem as duas alternativas corretas mostram a translação primeiro
Fala aí William, tudo bem? Basicamente quando utilizamos o transform as regras serão aplicadas da esquerda para a direita.
Sabendo disso, se rotacionarmos o elemento com rotate e depois transladar o eixo X, não teremos o comportamento esperado.
Acredito que a justificativa seja por isso.
Espero ter ajudado.
Matheus,
Eu entendi sua explicação, mas a justificativa da alternativa diz ao contrário da sua explicação. Ela diz "O correto seria fazermos a translação por último." e isso não faz sentido porque as alternativas certas dispõem do translate como primeira alteração:
transform: translateX(300px) scale(1.5) rotate(45deg); /*primeira alternativa*/
transform: translateX(300px) rotate(45deg) scale(1.5) /*segunda alternativa*/Não está claro a justificativa e, para ser sincero, entendi nada deste exercício. Não dava para saber qual a ordem que deveria ser aplicado porque pela imagem não é possível identificar isso. Ao meu ver, independente da ordem, o resultado seria o mesmo porque a ordem dos valores não altera a soma do produto, que é o resultado final da imagem em vermelho mostrada no exercício.
Thiago, Também não entendi porque dessas respostas. O correto seria fazermos a translação por último.
Na verdade a justificativa está errada. A justificativa correta seria - "A translação deve ser feita antes de todas as outras transformações" Acontece que o centro de expansão da imagem 2 (vermelha) é o centro da imagem 1 (roxa). Para que a distância dos centros dos dois quadrados seja de 300px (conforme a seta da figura apresenta), é necessário que o deslocamento seja feito com a imagem em seu tamanho original (tamanho da imagem roxa), para só depois sofrer a transformação de expansão - scale(1.5). Se a expansão for feita antes, o deslocamento de 300px irá ser em relação a imagem expandida, e será maior do que o esperado
Alguma novidade William? Conseguimos resolver sua dúvida?
Sobre a explicação pessoal, o exercício está com um problema na transcrição.
A maneira correta é como eu expliquei.
Espero ter ajudado.