Ordem dos atributos

Olá Júlio,

O correto é da direita para a esquerda. Assim como está no texto.

Nas alternativas é da mesma forma, veja:

transform: translateX(300px) scale(1.5) rotate(45deg);

transform: translateX(300px) rotate(45deg) scale(1.5);

Essas são as respostas corretas porque precisamos fazer as transformações de rotação e escala antes de aplicar a translação (que ocorre em ambas alternativas). (esse motivo se deve pelo fato de elas dependerem de um ponto de origem e nessa ordem correspondem ao resultado esperado nesse exercício.

Mas respondendo sobre a questão da ordem. Veja que na primeira, fazemos as transformações na seguinte ordem:

rotate depois scale e depois translate

e na segunda é:

scale depois rotate e depois translate

Ou seja, em relação a ordem em que escrevemos é da direita para a esquerda.

Fez mais sentido agora?

Não consegui compreender que diferença faz a ordem. No final das contas, os 3 comandos serão aplicados ao mesmo tempo. Independente se for rotate, scale, translate ou translate, scale, rotate.

No que implica essa ordem de escrita?

Olá Diego, tudo bem?

Então, o que acontece é que na verdade visualizamos o resultado de todas as transformações de uma vez. Mas não, a aplicação das transformações acontece em ordem.

A explicação mais exata é porque cada uma das transformações que temos: - Translação - Rotação - Escala

Podem, e são representadas por matrizes de transformação. E por isso, assim como na multiplicação de matrizes,

AxB nem sempre é igual a BxA

Então quando escrevemos a ordem da transformação, na verdade estamos escrevendo a ordem em que as matrizes de transformação serão multiplicadas. Logo, a ordem importa. Pois se trocássemos a ordem teríamos resultados diferentes.

Ficou mais claro? Qualquer coisa é só perguntar ;)

Bons estudos!

Olá!

A minha dúvida é a mesma do Júlio Barreto. Como a resposta sobre as matrizes (que eu estudei há mais de 20 anos) não ficou clara para mim, fiz um exemplo para tentar entender. E, aparentemente, a ordem de aplicação dos valores é da esquerda para a direita. No exemplo que fiz, eliminei o scale para simplificar. No quadrado verde usei apenas o translateX e o quadrado foi para a direita, permanecendo na mesma linha. No quadrado amarelo usei translateX e rotate, nessa ordem. O quadrado foi transladado para a direita e rotacionado, permacendo na mesma linha. No quadrado vermelho usei o rotate e translateX, nessa ordem. Aparentemente, o quadrado foi rotacionado, o que mudou seu eixo, e então deslocado para baixo. http://codepen.io/evandrosevergnini/pen/qRREmy

Olá Evandro,

Esse é um problema um pouco difícil de entender então vou tentar ser mais detalhista. Alguns dos conceitos que você colocou não são verdade.

Primeira observação: algumas das transformações tem um eixo em que são aplicadas e outras não tem. Translação não precisa de eixo. Escala e Rotação usam um eixo para serem aplicadas.

Veja:

"No quadrado amarelo usei translateX e rotate, nessa ordem. O quadrado foi transladado para a direita e rotacionado, permacendo na mesma linha."

Aqui, você escreve eles nessa ordem, mas como falei antes, eles são sim aplicados ao contrário (porque cada um desses efeitos vão virar matrizes de transformação).

Entendendo o que acontece:

Como falei, 1o vem a rotação. O quadrado gira em torno do próprio eixo. Ficando com a barra preta para cima. e depois ele sofre a translação (vai para a direita).

E quanto ao quadrado vermelho:

"No quadrado vermelho usei o rotate e translateX, nessa ordem. Aparentemente, o quadrado foi rotacionado, o que mudou seu eixo, e então deslocado para baixo."

Então, rotação não muda eixo. O que ocorre é que primeiro ele sofre a translação indo para a direita. E em seguida ele sofre a rotação em cima do eixo central do quadrado (o centro da posição inicial). E por isso ele desce.

Uma forma de tentar visualizar isso é ficar tirando e colcando o rotate(90deg) da lina de código para ver que ele usa o eixo central inicial , e também que isso só ocorre depois da translação.

.square-red {
    background-color: red;
    transform: rotate(90deg) translateX(50px);
}

A visualização que acontece é uma forma para tentar entender. Mas o que visualizamos fazendo isso, é a aplicação da transformação resultante (o resultado da multiplicação das matrizes rotação e translação). Por isso não vemos o efeito rotate(90deg) bonitinho da rotação em cima do eixo como num círculo(como mostra na resposta do exercício em https://cursos.alura.com.br/course/avancando-html-css/task/6136).

Mas o importante é:

• A ordem importa porque diferentes ordens geram transformações resultantes diferentes Podemos ver isso no código que você mandou. O quadrado amarelo tem resultado diferenteo do vermelho.

• A ordem de aplicação é da direita para a esquerda. Nessa explicação que eu dei espero ter esclarecido como ocorre essa aplicação.

Júlio, Diego e Evandro conseguiram entender como que o CSS manipula os objetos agora?

Me avisem por favor (:

Antes de tudo, agradeço pela explicação. O objetivo é compreender o comportamento das funções transform para poder aplicá-las com propriedade. Eu descrevi o comportamento aparente, como o movimento aparente do sol, pois hoje sabemos que é a terra quem se move. Ao meu ver, o ponto chave para compreender o mecanismo é o eixo inicial, como você bem colocou: ... em seguida ele sofre a rotação em cima do eixo central do quadrado (o centro da posição inicial). Para acrescentar, a respeito dos eixos, encontrei este texto, trecho de: Alexis Goldstein, Louis Lazaris, Estelle Weyl. “HTML5 & CSS3 for the Real World.” da SITEPOINT: "Translations functions allow you to move elements left, right, up, or down. These functions are similar to the behavior of position: relative; when declaring top and left, moving elements up and down or left and right along the x and y axes." Outra fonte, o Livro "Introdução ao HTML5 e CSS3 A Evolução da Web", da Alta Books, pág. 529: "translate(): move o elemento da sua origem pelos eixos X, Y e/ou Z".

Olá, Fiquei com a mesma dúvida sobre a ordem de aplicação dos valores na propriedade transform. Entendo perfeitamente que a ordem importa mas no meu entendimento lógico ainda faz sentido ser da direita para à esquerda.

E para embasar segue o que encontrei no https://www.w3.org/TR/css-transforms-1/.

EXAMPLE 4 div { height: 100px; width: 100px; transform: translate(80px, 80px) scale(1.5, 1.5) rotate(45deg); } This transform moves the element by 80 pixels in both the X and Y directions, then scales the element by 150%, then rotates it 45° clockwise about the Z axis. Note that the scale and rotation operate about the center of the element, since the element has the default transform-origin of 50% 50%.

The transform specified above Note that an identical rendering can be obtained by nesting elements with the equivalent transforms:

Segundo o raciocínio explicitado a ordem é da esquerda pra direita.

Obrigada