Solucionado (ver solução)
Solucionado
(ver solução)
3
respostas

Ordem dos atributos!

Boa noite, quero tirar só uma duvida pra deixar claro. na atividade diz:

Porém, quando colocamos mais de uma transformação, a ordem entre elas importa, já que o navegador as aplica da esquerda para a direita. Ou seja, no exemplo acima, a div será primeiro transladada e depois rotacionada.

Na verdade o navegador aplica da direita para a esquerda, correto ? Vi essa mesma duvida em outros tópicos antigos mas acho que ainda não houve alteração na atividade.

3 respostas

Fala aí Luan, tudo bem? Na verdade a ordem é da esquerda para a direita mesmo, olha o exemplo que eu fiz:

https://codepen.io/mahenrique94/pen/JzjywJ

Repare que na segunda div (azul), primeiro foi rotacionado e depois transladado.

Espero ter ajudado.

A atividade esta confusa pq na resposta da letra B diz o seguinte:

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

O correto seria fazermos a translação por último. Da forma como está, a caixa será rotacionada na direção da posição original dela.

Então essa alternativa esta correta já que é da esquerda para a direita, e na atividade está como incorreta.

ou estou confundindo ?

solução!

Na atividade, as respostas corretas seria A e D.

A B está incorreta porque na atividade a ideia é transladar 300px no eixo X.

Se você colocar a B vai rotacionar a div o que irá mudar a direção de seu eixo X, dai com o translate você vai estar mexendo no eixo X e Y.

Espero ter ajudado.

Quer mergulhar em tecnologia e aprendizagem?

Receba a newsletter que o nosso CEO escreve pessoalmente, com insights do mercado de trabalho, ciência e desenvolvimento de software