Solucionado
Tenho feito o curso e uma coisa que tem me incomodado é a ordem que se aplicam as transformações no transform. Compreendo completamente o conceito, mas ainda fico confuso durante as aulas quando no texto está escrito algo como "adicione também a transformação translate(-50%, -50%) após as outras transformações." e logo a seguir no código está:
transform: translate(-50%, -50%) rotate(10deg) translateZ(1px);
(A ordem inversa do que foi instruída)
Alguém pode me ajudar?
Thiago, tudo bem?
Isso acontece por que a ordem no transform não tem influência sobre o que vai acontecer. No W3SCHOOLS eles demonstram que a propriedade de transform é definida assim
transform: none|transform-functions|initial|inherit;Ela pode ser none ou transform functions
Rotate, transform, scale ou o que mais tiver, na ordem que quiser
Espero ter ajudado, Se isso responder sua dúvida, não esqueça de marcar a minha resposta ou a do colega como solucionadora. Se não, pode perguntar de novo que ajudamos!
Poxa, fiquei um pouco confuso então. Em alguns exercícios anteriores, ele fala justamente o contrário (No caso, onde aprendi). Diz que o navegador aplica as transformações, quando existe mais de uma, da direita pra esquerda, então a ordem teria importância. Até mesmo em exercícios anteriores a esse, mas no mesmo capítulo, trocando a ordem das funções mudava a funcionalidade.
Segue o link: https://cursos.alura.com.br/course/avancando-html-css/task/6136
Mas isso sempre depende de qual é o tipo de transformação que você está causando e se você vai manipular ela via JS e principalmente: Se ela vai ser animada e manipulada via JS
https://jsfiddle.net/97dcvvxq/
Nesse fiddle, eu estou adicionando o transform 1 segundo depois de a pagina ser carrega e perceba que ele aplica todas praticamente juntas. É bom você saber que, sim, o navegador lê as transformações da direita pra esquerda, mas que na prática, elas são aplicadas praticamente ao mesmo tempo.
A ordem vai interessar também quando um efeito sobrepor outro. Você pode fazer este tipo de código aqui:
transform: translate(10px, 10px) rotate(10deg) translate(10px, 10px);E ele é completamente funcional. Veja que declarei a mesma propriedade duas vezes. o que vai acontecer é que elas somam. Ou seja :
translate(10px, 10px) translate(10px, 10px) // faz 20px de movimento final ou seja translate(20px, 20px)Ao animar dinamicamente, você pode escolher a que tempo cada animação acontece via Javascript usando o WebkitPlayState
Dá uma olhada no artigo abaixo
https://css-tricks.com/controlling-css-animations-transitions-javascript/
Eu atualizei a resposta pra você ali em cima com um link de artigo pra ver a manipulação via JS