Ordem das transform css3 | HTML5 e CSS3 II: Turbinando as suas páginas

Na atividade 3, aula 4 do curso de HTML 2 se fala bastante sobre como a ordem das transform interfere diretamente no resultado final, ficou bastante claro que é executado da esquerda pra direita e afins.

A minha dúvida é sobre como isso realmente implica de verdade, por exemplo, a alternativa C indica que está errada pois: "o scale aumentaria a translação." mas por que o Scale influencia na translação?

Outra, na letra B indica que: "Da forma como está, a caixa será rotacionada na direção da posição original dela." eu refiz em casa e percebi que no final a rotação aponta para a posição inicial dela, mas em fim.

Pode ter sido erro de interpretação minha, até peço desculpas se estou sendo repetitivo, mas toda a lógica por trás ficou bem confusa pra mim.

Bem, na verdade o curso ensina que o navegador lê as transformações da direita pra esquerda.

De acordo com a documentação disponível no link: https://developer.mozilla.org/pt-BR/docs/Web/CSS/CSS_Transforms/Using_CSS_transforms#Propriedades_de_CSS_transforms

temos:

transformDefine qual alteração será feita no elemento. Pode-se usar mais de um efeito separado-os por um espaço. Tais efeitos serão aplicados um após o outro, na ordem determinada no código.

Assim sendo, vemos que não acontecem ao mesmo tempo, e sim uma transformação de cada vez.

Talvez o que não tenha ficado claro pra você, é o porque a ordem faz diferença, e isso já uma questão de matemática, e não de CSS.

Na matemática, especificamente em álgebra linear e geometria analítica, nós encontramos as definições de transformações lineares em espaços dimensionais, no nosso caso aqui, o 2d.

O CSS também usa essas definições matemáticas para calcular as suas transformações. O pulo do gato, é que cada uma dessas transformações possui um ponto de origem!

Exemplo:você pode dar ordem para um objeto:

rotacione 90º.

Mas rotacionar em relação a que ponto? ao meu centro? a alguma ponta? em torno de outro objeto?

a escala e translado possui o mesmo questionamento. Transformar em relação a qual ponto de origem?

Para resolver isso, o CSS tem o campo: transform-origin, que por padrão esta posição é o canto superior esquerdo do elemento, e é usado pelas transformações que precisam desse ponto.

Agora o pulo mortal carpado do gato, é que algumas transformações alteram o transform-origin, ou seja, o ponto de referencia das transformações, como no caso de transladar.

Como ele altera o ponto de origem, ele interfere nas transformações que acontecem depois dele, e por isso ele deve ser preferencialmente deixado para ser realizado no final, para não termos surpresas.

Para concluir, isso é mesmo uma coisa que gera muita confusão e poucas pessoas vão ter domínio. Até existe um outro tópico sobre o assunto aqui no fórum da Alura, que foi dado como encerrado, mas cuja resposta não explica o contexto geral e só sugere fazer o efeito via javascript.

Espero ter ajudado, e não ter confundido mais ainda.