Entrar Ainda não tem acesso?
Solucionado (ver solução)
Solucionado
(ver solução)
3
respostas

Transformações combinadas

Referente ao curso HTML5 e CSS3 II: Turbinando as suas páginas, no capítulo Transformações e atividade Rotação e cisalhamento

por Natanael
| 51.8k xp | 6 posts

Nesse exercício é pedido para usarmos duas transformações: skew e rotate. No espaço de opinião do instrutor ele mostra o seguinte código: 

transform: skew(-10deg) rotate(-5deg);

E diz que "fazemos primeiro o skew para depois fazer o rotate".

Mas no exercício anterior diz que "o navegador aplica as transformações da direita para a esquerda".

Fiquei confusa. Se era para primeiro cisalhar e depois rotacionar, o código não deveria ser assim, já que o navegador aplica primeiro as transformações da direita:

transform: rotate(-5deg) skew(-10deg);
3 respostas
solução!
por Wanderson Macêdo
| 3963.8k xp | 8086 posts
Instrutor Desenvolvedor

Oi Layane, a confusão é realmente o problema, no MDN, a referência para maior parte da documentação das coisas de front-end (html, css e js) diz que transformações compostas são aplicadas da esquerda para a direita e não o contrário como você mencionou ter viso.

Olha aqui o link na sessão de syntax: https://developer.mozilla.org/en-US/docs/Web/CSS/transform?v=a

Neste caso, a primeira opção está correta e em algum lugar do texto nós precisamos corrigir esse detalhe.

Você poderia mencionar melhor onde se encontra essa parte de esquerda e direita pra gente corrigir?

por Natanael
| 51.8k xp | 6 posts

Entendi. Obrigada.

A parte em que diz que "o navegador aplica as transformações da direita para a esquerda" está no curso HTML5 e CSS3 II, aula 04, exercício 03.

por Wanderson Macêdo
| 3963.8k xp | 8086 posts
Instrutor Desenvolvedor

Certo, estaremos corrigindo o mais breve possível, obrigado pelo feedback Layanne!