Entrar Ainda não tem acesso?
2
respostas

translate antes ou apos rotate

Referente ao curso HTML5 e CSS3 II: Turbinando as suas páginas, no capítulo Cálculos com CSS e atividade Refatorando o banner do Twitter

por Tiago Bastos Gonçalves
| 99.3k xp | 123 posts
Backend Developer

O translatedeve ficar antes ou após o rotate? Na atividade o instrutor disse "Colocamos, no CSS, o resultado das contas necessárias para transladar corretamente o banner após a rotação.", mas no CSS o translateestá antes do rotate, que foi a solução proposta na atividade em que foi realizada a criação do banner:

transform: translate(calc(0.707 * (3.5rem - 100%) + 100%), calc(-0.707 * 3.5rem)) rotate(45deg)

Afinal, qual é a ordem? Isso tem sido confuso para mim porque a aula em que foi introduzido a propriedade transformestava bem confusa com relação a isso, tanto que eu vi dúvidas criadas no fórum relatando dúvidas nas soluções dadas.

2 respostas
por Laís Cavalcanti
| 2577.8k xp | 4815 posts
Instrutor

Oi, Tiago, tudo bem?

Então, é isso mesmo, da esquerda para a direita, na documentação do W3C, a principal organiação que padroniza o CSS, segue um bom exemplo sobre:

div {
  height: 100px; width: 100px;
  transform: translate(80px, 80px) scale(1.5, 1.5) rotate(45deg);
}

The visual appareance is as if the div element gets translated by 80px to the bottom left direction, then scaled up by 150% and finally rotated by 45°.

Ou seja, o primeiro a ser lido é o translate, depois o scale e, por último, o rotate. Da esquerda para a direita. (https://www.w3.org/TR/2019/CR-css-transforms-1-20190214/)

No exemplo que você trouxe, não o scale, mas a sequencia se mantém, primeiro o translate e depois o rotate. Se a dúvida persistir não hesite em vir aqui :}

por Tiago Bastos Gonçalves
| 99.3k xp | 123 posts
Backend Developer

Oi, Laís.

Então, é errado eu colocar o rotate antes do translate? Se sim, porque está forma é errada?