Boa noite, Elías! Como vai?
A divergência entre o texto e o código se dá pq foi definido pela W3C que as transformações seriam aplicadas da direita para a esquerda como pode ser visto nesse link da documentação. Mais precisamento nesse trecho que diz que o entendimento do impacto da aplicação é feito na ordem reversa:
The impact on the rendering of the element can be intepreted as an application of these transforms in reverse order: the elements is rotated, then scaled, then translated.
Por isso, a leitura é feita da direita para a esquerda.
Agora, para entender o motivo de haver uma ordem correta na aplicação das funções e pq a alteração na ordem influência o resultado final, vc precisará ter um pouco de conhecimento de álgebra linear e aplicação de funções matemáticas.
Então vamos lá!
A primeira coisa que vc precisa entender é que rotate, skew, translate, scale e as demais transformações possíveis de serem usadas no CSS são funções! Então vamos pegar o seu caso de exemplo, e imagina que eu tenha um elemento HTML sobre o qual eu queira primeiro aplicar um cisalhamento (distorção) e depois um rotação, como eu descreveria isso matematicamente?
skew(elemento) = resultadoFinal
rotate(resultadoFinal)
Ou de forma abreviada:
rotate(skew(elemento))
OPA!! Nesse momento vc já entende o motivo das transformações aparecerem em ordem inversa à que lemos! É pq o CSS está seguindo a notação matemática!
Mas vc deve estar pensando aí que ainda falta uma pergunta a ser respondida! E realmente há! Falta responder pq a ordem com que as transformações são escritas altera o resultado! E é aqui que entra a álgebra linear!
Essas funções de transformação por baixo dos panos são representadas por matrizes! Ou seja, rotate é representada por uma matriz padrão (aqui vamos chamar essa matriz de R) e skew tbm tem uma matriz padrão (que aqui vamos chamar de S). Nosso elemento HTML tbm será representado por uma matriz que chamaremos de E.
Então, a álgebra linear diz que para aplicarmos uma função de transformação devemos multiplicar a matriz padrão da transformação pela matriz na qual queremos aplicar a mudança. Sendo assim, na prática, se queremos aplicar primeiro um cisalhamento e depois um rotação, devemos fazer:
- Multiplicar a matriz de
skew (S) pela matriz do elemento HTML (E). Isso dá como resultado uma nova matriz Resultado.S * E = Resultado
- Multiplicar a matriz de
rotate (R) pela matriz do resultado anterior (Resultado). Isso dá como resultado uma nova matriz ResultadoFinal.R * Resultado = ResultadoFinal
Ou de forma simplificada:
R * S * E = ResultadoFinal
E novamente podemos ver que a ordem é igual à que aparece no CSS (rotate e depois skew).
Por fim, o motivo da ordem em que se declara as funções faz diferença pq a multiplicação de matrizes não é comutativa! Ou seja, em geral:
Matriz1 * Matriz2 != Matriz2 * Matriz1
Por esse motivo a ordem importa!
E a ordem em que vc vai declarar as funções de transformação no CSS vai depender do que vc quer fazer!
Mas como eu não deixo as pessoas nas trevas, sempre tenho uma dica na manga para levá-las para a luz! E a dica é: ordene mentalmente o que vc deseja fazer! Depois declare o CSS na ordem inversa!
Exemplo prático:
Questão: Quero expandir e depois rotacionar.
Resultado no CSS:
transform: rotate(...) scale(...);
Qualquer coisa é só falar!
Grande abraço e bons estudos!
